Menu
I am trying to make a javascript image rollover feature for my site. The problem is I am using angled images, which makes the rollover difficult. I found a script on O’Reilly’s website which allows for using only 3 images (one for normal state, one for mouseover, and one for mousedown) and using image maps and CSS to control which part of the image is displayed, provding a mousover effect. The only problem is it is set to use rectangle shapes on the image maps, and I need something that can use polygon shapes.
A demo of the code can be seen here :
[url]http://www.oreillynet.com/javascript/2003/07/01/examples/jsdhtmlcb_bonus1_example.html
The complete code is :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“
<html xmlns=”
<head>
<base href=”
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<title>Scriptable Imagemaps</title>
<script type=”text/javascript”>
/*****************************************
Scriptable Image Maps by Danny Goodman ([url]www.dannyg.com
A bonus recipe for readers of O’Reilly’s
“JavaScript & DHTML Cookbook”
This recipe first published at O’Reilly Network ([url]www.oreillynet.com
For full implementation notes, read the article.
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>
</head>
<body onload=”initMaps(‘menubarMap’)”>
<div style=”position:relative”>
<img id=”menubarUp” src=”/javascript/2003/07/01/graphics/menubarUp.jpg” height=”110″ width=”680″ alt=”menubar” border=”0″ style=”position:absolute; top:0px; left:0px; visibility:visible” usemap=”#menubar” />
<img id=”menubarOver” src=”/javascript/2003/07/01/graphics/menubarOver.jpg” height=”110″ width=”680″ alt=”menubar” border=”0″ style=”position:absolute; top:0px; left:0px; visibility:hidden” usemap=”#menubar” />
<img id=”menubarDown” src=”/javascript/2003/07/01/graphics/menubarDown.jpg” height=”110″ width=”680″ alt=”menubar” border=”0″ style=”position:absolute; top:0px; left:0px; visibility:hidden” usemap=”#menubar” />
</div>
<map id=”menubarMap” name=”menubar”>
<!– onclick set to return false to disable links for this demo; remove for your application –>
<area shape=”rect” coords=”8,22,117,86″ href=”index.html” alt=”new” title=”new” onclick=”return false” />
<area shape=”rect” coords=”120,22,227,86″ href=”products.html” alt=”products” title=”view products” />
<area shape=”rect” coords=”230,22,337,86″ href=”manuals.html” alt=”manuals” title=”download manuals” onclick=”return false” />
<area shape=”rect” coords=”340,22,447,86″ href=”dealers.html” alt=”dealers” title=”find a dealer” onclick=”return false” />
<area shape=”rect” coords=”450,22,557,86″ href=”support.html” alt=”support” title=”get support” onclick=”return false” />
<area shape=”rect” coords=”560,22,667,86″ href=”contact.html” alt=”contact” title=”contact us” onclick=”return false” />
</map>
</body>
</html>
Can anyone help to refromat the code to accept polygon shapes?
Thanks.