PDA

View Full Version : CSS/javascript rollover problem

iDoof
04-29-2006, 01:02 PM
So this is kind of both CSS and javascript, but I'm guessing the solution lies more in Javascript so I'm posting this here.

I'm basically doing an image rollover, but the reason it's slightly more complicated is because it's actually an image map. When a hotspot on the map is rolled over, I want to change just the hotspot.

So here's the solution I came up with: I create a DIV with the new hotspot image and absolutely position it over the hotspot, then set visibility to "hidden". Then I created a Javascript function that just takes the DIV and sets its status to a variable "status". Then on the image map, I pass that function 'visible' onMouseOver, and I pass it 'hidden' onMouseOut.

It works alright, I guess. But you have to keep your mouse still over the hotspot for it to show up, otherwise it starts blinking, or it doesn't show up or something. It makes sense because when your mouse is over the hotspot, and the DIV appears over it, the mouse is no longer over the hotspot, so it disappears.


So what can I do???



Thanks a lot
coothead
04-29-2006, 02:00 PM
Hi there iDoof,

I would suggest that you make separate image maps for each hotspot and then swap these on mouseover/mouseout.
Here is an example...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>six in one</title>
<base href="http://coothead.homestead.com/files/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
div {
text-align:center;
margin-top:50px;
}
#pic {
border:3px double #000;
}
-->
</style>

<script type="text/javascript">
<!--
var maps=new Array();
maps[0]='apple0.jpg';
maps[1]='apple1.jpg';
maps[2]='apple2.jpg';
maps[3]='apple3.jpg';
maps[4]='apple4.jpg';
maps[5]='apple5.jpg';

onload=function() {
elem=document.getElementsByTagName('area');
for(c=0;c<elem.length;c++) {
elem[c].onmouseover=function() {
document.getElementById('pic').src=maps[this.id.split('-')[1]];
}
elem[c].onmouseout=function() {
document.getElementById('pic').src=maps[0];
}
}
}
var preloads=[];

function preload(){

for(i=0;i<arguments.length;i++) {

preloads[preloads.length]=new Image();

preloads[preloads.length-1].src=arguments[i];



}
}
preload('apple0.jpg','apple1.jpg','apple2.jpg','apple3.jpg','apple4.jpg','apple5.jpg');
//-->
</script>

</head>
<body>

<div>
<img id="pic" src="apple0.jpg" alt="" usemap="#apples" />
</div>

<div>
<map id="apples" name="apples">
<area id="a-0" coords="0,0,116,146" href="http://www.google.com" alt="">
<area id="a-1" coords="124,0,236,146" href="http://www.w3schools.com" alt="">
<area id="a-2" coords="244,0,360,146" href="http://www.htmlforums.com" alt="">
<area id="a-3" coords="0,154,116,280" href="http://www.htmlforums.com" alt="">
<area id="a-4" coords="124,154,236,280" href="http://www.google.com" alt="">
<area id="a-5" coords="244,154,360,280" href="http://www.w3schools.com" alt="">
</map>
</div>

</body>
</html>