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 :
http://www.oreillynet.com/javascript...1_example.html
The complete code is :
------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------
<!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" xml:lang="en" lang="en">
<head>
<base href="http://www.oreillynet.com/javascript/2003/07/01/examples/">
<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 (
www.dannyg.com)
A bonus recipe for readers of O'Reilly's
"JavaScript & DHTML Cookbook"
This recipe first published at O'Reilly Network (
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]/javascript/2003/07/01/graphics/menubarUp.jpg[/img]
[img]/javascript/2003/07/01/graphics/menubarOver.jpg[/img]
[img]/javascript/2003/07/01/graphics/menubarDown.jpg[/img]
</div>
<map id="menubarMap" name="menubar">
<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.
Specialized Javascript Image Rollover 
Linear Mode
