HTML Programming
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > HTML Programming
Reload this Page

Help with image map

Discuss Help with image map in the HTML Programming forum on Dev Shed.
Help with image map HTML Programming forum covering discussions of HTML and XHTML, as well as HTML-related issues such as writing W3C Compliant code. Use HyperText Markup Language for building websites.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old February 19th, 2000, 07:48 PM
tigertim tigertim is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 1999
Location: St.JOhn's, Newfoundland, Canada
Posts: 7 tigertim User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Can anyone please tell me if it is possible for when the mouse paases over an area in an image map, another image pops up.

If so please do tell me how if not, please let me no either way.

Tim
Reply With Quote
  #2  
Old February 19th, 2000, 08:18 PM
jeromega12 jeromega12 is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2000
Location: Seattle Wa Us
Posts: 12 jeromega12 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
We'll there is but it's kinda complicated.
You have to create mutilple javascript rollovers and hold them together with a table. This is almost imposible to do without a program. I suggest macromedia Fireworks http://www.macromedia.com/. Thats what I use.
Reply With Quote
  #3  
Old February 22nd, 2000, 09:38 AM
falcon falcon is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 1999
Location: UK
Posts: 50 falcon User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 21 m 33 sec
Reputation Power: 9
I might have miss read the question but this will do exactly what you have described. I apologize if I have read the message wrong.

<script language="javascript">
<!--
function doAction() {
document.image.src = "image2.gif";
}
-->
</script>

</head>
<body>

<img name="image" src="image1.gif" width="499" height="63" border="0" usemap="#image_map">

<map name="image_map">
<area shape="rect" coords="x1,y1,x2,y2" href="#" target="screen" onmouseover="doAction();">
<area shape="rect" coords="x1,y1,x2,y2" href="#" target="screen" onmouseover="doAction();">
</map>

I hope this what you were looking for.

Falcon

[This message has been edited by falcon (edited February 22, 2000).]
Reply With Quote
  #4  
Old April 10th, 2000, 10:47 AM
sacrilegious sacrilegious is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2000
Posts: 16 sacrilegious User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
what jeromega12 suggested is the easiest way... but just be careful of the code that fireworks or dreamweaver generates - it's just awfully fat and ugly... so u might want to use one of these tools to create the required effects and then manually redo the job - if u want the page to load faster and more efficiently that is... : )
Reply With Quote
  #5  
Old April 13th, 2000, 05:07 PM
Spookster Spookster is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 1999
Posts: 84 Spookster User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 9
It's not that difficult to do.

<html>
<head>
<title>ImageMap Rollover Text Descriptions</title>
<script language="JavaScript">
<!--//
function show(layerid) {
if (document.all){
layerid.style.visibility="visible"
}
else
if(document.layers){
layerid.visibility="show"
}
}
function hide(layerid){
if (document.all){
layerid.style.visibility="hidden"
}
else
if(document.layers){
layerid.visibility="hide"
}
}
//-->
</script>
</head>
<body>

<!--
This is where you would put your imagemap and image to be used. Just follow the mouseover example in this one
This is the mousover handler... onMouseover="show(info1);" Inside the parenthesis is where you will put the id of
the layer you want to hide or show. ie <div id="nameofdiv"> would go onMouseover="show(nameofdiv);"
-->
<img src="images/australia01.jpg" border="0" usemap="#imagemap1">
<map name="imagemap1">
<area shape="circle" coords="115,267,27" href="somewhere.html" onMouseover="show(info1);" onMouseout="hide(info1);">
<area shape="circle" coords="104,203,24" href="somewhere.html" onMouseover="show(info2);" onMouseout="hide(info2);">
</map>

<!--
These are the layers that will popup when the corresponding hotspot on the imagemap is moused over
You can position the layers by changing the values for top and left or you can change the position to be
relative to other elements on the page
-->
<div id="info1" style="position:absolute;left:300;top:100;visibility:hidden">
<h1>Here is your info</h1>
</div>

<div id="info2" style="position:absolute;left:300;top:100;visibility:hidden">
<h1>Here is some other info</h1>
</div>
</body>
</html>

Just put images in place of the text in the layers. You can use relative positioning fo the layers also if you dont like absolute positioning.

Spookster
Reply With Quote
  #6  
Old April 14th, 2000, 07:09 AM
firepages's Avatar
firepages firepages is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Feb 2000
Location: Perth West Australia
Posts: 741 firepages User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 9
Spookster is right - avoid the dreamweavers of this world if you can- just thought i'd mention that in the new Netscape 6 (what happened to 5?) the if(document.layers) sniffing will not work as Netscape have thown .layers away !! although it will respond to document.images !- the moral is if you code your own stuff you can easily change it as and when the need (or next browser) arises - not sure how dreamweaver and friends will handle all this.

------------------
Simon Wheeler
FirePages -DHTML/PHP/MySQL
Reply With Quote
  #7  
Old May 3rd, 2000, 09:45 PM
eyeeye eyeeye is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2000
Posts: 3 eyeeye User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
You can see this in action at http://www.nhphonebook.com on the map of New Hampshire to the right of the search box.

I put this together w/ transparent gifs over a background image. As you mouse over a certain region a new image rolls over... all by using only one table cell...I used Dreamweaver 3. Hand-coding will bug your eyes out of your head.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > HTML Programming > Help with image map

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway.