Forum Moderators: open
I am having a bit of a problem with an image map on a site I am building.
I'm using the map with javascript to fire a rollover for some links.
If you can imagine, I have a block of image links (think of a small brick wall, 3 bricks on top and 4 underneath). When you rollover any one of them, they change colour and are obviously linked to another page.
I am using just 2 images (7 bricks per image), with an on and off state. A div style to position them and to make them hidden/visible. And the image map to determine which part is hidden/visible and to call the hyperlinks.
It is all working hunky dorey in IE and Firefox, with all 7 bricks rolling and linking. In Netscape however, the top 3 images rollover and link but the bottom ones do nothing. In Opera, none of them link yet the top 3 rollover.
Can anyone tell me if there is there a fix for this?
Cheers,
Peter.
Are you using a true image map (using X and Y coordinates on a simgle image) or are you using a block of images and controlling with Javascript? Could you post a short example of the markup and the script you are using (remove any specifics and non-essential items first)?
Thank you for help. What I am using is an area map and javascript on two seperate images, one for the on state and another for the off state. The script is obviously not mine but I can't remember where I sourced it from.
I have pasted the relevant parts below.
<script type="text/javascript">
function initMaps() {
if (document.getElementById) {
var mapIds = initMaps.arguments;// pass string IDs of containing map elements
var i, j, area, areas;
for (i = 0; i < mapIds.length; i++) {
areas = document.getElementById(mapIds[i]).getElementsByTagName("area");
for (j = 0; j < areas.length; j++) {// loop thru img elements
area = areas[j];
area.onmousedown = imgSwap;// set event handlers
area.onmouseout = imgSwap;
area.onmouseover = imgSwap;
area.onmouseup = imgSwap;
}
}
}
}
// image swapping event handling
function imgSwap(evt) {
evt = (evt)? evt : event;
var elem = (evt.target)? evt.target : evt.srcElement;
var imgClass = elem.parentNode.name;
var coords = elem.coords.split(",");
var clipVal = "rect(" + coords[1] + "px " +
coords[2] + "px " +
coords[3] + "px " +
coords[0] + "px)";
var imgStyle;
switch (evt.type) {
case "mousedown" :
imgStyle = document.getElementById(imgClass + "Down").style;
imgStyle.clip = clipVal;
imgStyle.visibility = "visible";
break;
case "mouseout" :
document.getElementById(imgClass + "Over").style.visibility = "hidden";
document.getElementById(imgClass + "Down").style.visibility = "hidden";
break;
case "mouseover" :
imgStyle = document.getElementById(imgClass + "Over").style;
imgStyle.clip = clipVal;
imgStyle.visibility = "visible";
break;
case "mouseup" :
document.getElementById(imgClass + "Down").style.visibility = "hidden";
// guarantee click in IE
if (elem.click) {
elem.click();
}
break;
}
evt.cancelBubble = true;
return false;
}
</script>
<body onload="initMaps('menubarMap')">
<td width="770"><div style="position:relative">
<img id="menubarUp" src="images/menubarUp.jpg" height="86" width="770" border="0" style="position:absolute; top:0px; left:0px; visibility:visible" usemap="#menubar" />
<img id="menubarOver" src="images/menubarOver.jpg" height="86" width="770" alt="menubar" border="0" style="position:absolute; top:0px; left:0px; visibility:hidden" usemap="#menubar" />
</div>
<map id="menubarMap" name="menubar">
<area shape="rect" coords="17,26,165,53" href="page1.htm" alt="page1" title="page1" onclick="return false" />
<area shape="rect" coords="168,26,316,53" href="page2.htm" alt="page2" title="page2" onclick="return false" />
<area shape="rect" coords="318,26,451,53" href="page3.htm" alt="page3" title="page3" onclick="return false" />
<area shape="rect" coords="17,80,125,54" href="page4.htm" alt="page4" title="page4" onclick="return false" />
<area shape="rect" coords="127,80,234,54" href="page5.htm" alt="page5" title="page5" onclick="return false" />
<area shape="rect" coords="236,80,343,54" href="page6.htm" alt="page6" title="page6" onclick="return false" />
<area shape="rect" coords="345,80,451,54" href="page7.htm" alt="page7" title="page7" onclick="return false" />
</map>
</td>
I hope this is ok. The onclick="return false" line is in because the other pages aren't built yet.
Thanks again.
Peter.
What I would suggest for better cross-browser support is a simpler approach -- slicing each of the images into seven separate images. That way you can use a simple rollover script, and avoid using both image map and javascript "clip", which I'm guessing is the problematic spot. By making this change, you can also use a regular anchor tag and have links that the search engines will follow.
Or, even simpler if your desired visual effect allows for it, is to avoid javascript altogether -- use a css a:hover rule to create the rollover. If you google for [css rollover] you'll find several approaches that avoid javascript altogether.
