Image maps - onmouseon, onmouseout?

livinus · #1 02-24-2007, 04:13 AM

Hey there,

I want to create this effect: I make an Image map with hotspots (I know how to do this), and when the user goes over one of those hotspots, in another cell a discription should appear (I don't know how to do this). I don't know much about JavaScript, but I think that's the language I should use to get this effect? Can somebody please help?

I already had a go on this, which resulted in the code below. Maybe you people can find where I got wrong, as the effect isn't working with this. Or should I just try a totally different thing?

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">

showdiscription(id){
document.getElementById("discription" + id).style.display = "block";
};

hidediscription(id){
document.getElementById("discription" + id).style.display = "none";
};

</script>
</head>

<body>
<table width="750" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" valign="top"><img src="Images/Groepsfoto/Groepsfoto.JPG" width="600" height="284" border="0" usemap="#Map" /></td>
<td><table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="196"> </td>
</tr>
<tr>
<td height="74">
<div id="discription1" style="display: none;">
Dit is beschrijving nummer 1.
</div>
<div id="discription2" style="display: none;">
Dit is beschrijving nummer 2.
</div>
<div id="discription3" style="display: none;">
Dit is beschrijving nummer 3.
</div>
</td>
</tr>
</table></td>
</tr>
</table>

<map name="Map" id="Map">
<area shape="circle" coords="301,37,19" href="#" onmouseover="showdiscription(1);" onmouseout="hidediscription(1);" />
<area shape="circle" coords="337,44,18" href="#" onmouseover="showdiscription(2);" onmouseout="hidediscription(2);" />
<area shape="circle" coords="366,71,15" href="#" onmouseover="showdiscription(3);" onmouseout="hidediscription(3);" />
</map>

</body>
</html>

Any help would be greatly appreciated,
livinus

spiresgate · #2 02-24-2007, 05:09 AM

You look as if you are trying to do something I have had some success with on my website:

http://myweb.tiscali.co.uk/spiresgat...Web/2alpha.htm

If you put the cursor over the nose of a student then a larger version appears at top right and a contemporary version may appear below it. In addition the student's name will be seen as a yellow sticker. If you click on the face when the sticker appears the you will get further information either as an alert or as a full page in a new window.

This is done using hot spots as you have set it up. You could probably use my code to replace the lower school badge with a block of descriptive text.

I must confess that I arrived at my solution by blundering around a bit and it may not be very elegant but perhaps it will give you some ideas. I might even use your code to clean mine up in places.

livinus · #3 02-24-2007, 06:21 AM

It's something like this I'm looking for, but instead of the zoomed-in version on the right, I'd like to have the name there. So no alternative text that brings the name under the cursor when you stay for some time on somebody's head. Your code indeed looks quite difficult to me. And by the way, the code I posted really isn't working properly, so I guess copying it for your site isn't quite a good idea

...

Can anybody solve my problem

Orc Scorcher · #4 02-24-2007, 06:42 AM

Pay attention to the browsers error messages, the 'function' keywords are missing in your code. Btw, you don't need the onmouseout for each area, you can use the map's onmouseout handler:

Code:

function showdiscription(id){
   var descriptionStyle = document.getElementById("discription" + id).style;
   descriptionStyle.display = "block";
   document.getElementById("Map").onmouseout = function () {
      descriptionStyle.display = "none";
      this.onmouseout = null;
   }
};

livinus · #5 02-24-2007, 08:10 AM

Thanks, this was of great help. I changed the old code with yours and now it's working fine!

Leaving out the onmouseout for each area worked too! Thanks a lot!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)