linuxllama22
13 May 2008, 07:39 PM
I am using thee ol' imagemap rollover trick, but instead of changing one button, it changes all of them. Your help would be much appreciated . :D
Could someone please check this over.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Site</title>
<style type="text/css"> #VIP {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; color: #66ccff; text-align: right}
</style> </head><body onload="initMaps('menubarMap')" style="background-color: rgb(34, 67, 84);"><table style="text-align: left; width: 100px;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td><br>
</td><td><div id="VIP"><font size="5">V.I.P.</font><br>
Username<br><input size="12" name="username"> <br> Password <br> <input size="12" name="pass" type="password">
</div></td></tr><tr><td><div style="position: absolute; top: 205px; left: 13px;"><img id="menubarUp" src="Images/buttonsdown.png" alt="menubar" style="position: absolute; top: 0px; left: 0px; visibility: visible;" usemap="#menubar" border="0" height="360" width="160"><img id="menubarOver" src="Images/buttons.png" alt="menubar" style="position: absolute; top: 0px; left: 0px; visibility: hidden;" usemap="#menubar" border="0" height="360" width="160">
<img id="menubarDown" src="Images/buttons.png" alt="menubar" style="position: absolute; top: 0px; left: 0px; visibility: hidden;" usemap="#menubar" border="0" height="360" width="160"></div> <map id="menubarMap" name="menubar"> <area shape="polygon" alt="menubar" title="button1" coords="13,37,147,8,146,51,14,80,14,80,13,68" href="" target="">
<area shape="polygon" alt="menubar" title="button2" coords="14,103,146,76,147,116,14,147" href="" target="">
<area shape="polygon" alt="" title="button3" coords="13,173,145,144,146,185,13,215,13,190" href="" target="">
<area shape="polygon" alt="" title="button4" coords="14,240,148,209,146,252,12,284" href="" target=""> <area shape="polygon" alt="" title="button5" coords="14,308,147,278,148,319,14,351" href="" target="">
</map> <img src="Images/bg.png"></td><td><div align="right"><iframe height="65" width="450"></iframe></div>
<iframe height="350" width="700"></iframe></td> </tr> </tbody>
</table> <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 area 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; // equalize event models var elem = (evt.target) ? evt.target : evt.srcElement; var imgClass = elem.parentNode.name; // get map
element name var coords = elem.coords.split(","); // convert coords to clip var clipVal = "polygon(" + 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> </html>
Could someone please check this over.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Site</title>
<style type="text/css"> #VIP {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; color: #66ccff; text-align: right}
</style> </head><body onload="initMaps('menubarMap')" style="background-color: rgb(34, 67, 84);"><table style="text-align: left; width: 100px;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td><br>
</td><td><div id="VIP"><font size="5">V.I.P.</font><br>
Username<br><input size="12" name="username"> <br> Password <br> <input size="12" name="pass" type="password">
</div></td></tr><tr><td><div style="position: absolute; top: 205px; left: 13px;"><img id="menubarUp" src="Images/buttonsdown.png" alt="menubar" style="position: absolute; top: 0px; left: 0px; visibility: visible;" usemap="#menubar" border="0" height="360" width="160"><img id="menubarOver" src="Images/buttons.png" alt="menubar" style="position: absolute; top: 0px; left: 0px; visibility: hidden;" usemap="#menubar" border="0" height="360" width="160">
<img id="menubarDown" src="Images/buttons.png" alt="menubar" style="position: absolute; top: 0px; left: 0px; visibility: hidden;" usemap="#menubar" border="0" height="360" width="160"></div> <map id="menubarMap" name="menubar"> <area shape="polygon" alt="menubar" title="button1" coords="13,37,147,8,146,51,14,80,14,80,13,68" href="" target="">
<area shape="polygon" alt="menubar" title="button2" coords="14,103,146,76,147,116,14,147" href="" target="">
<area shape="polygon" alt="" title="button3" coords="13,173,145,144,146,185,13,215,13,190" href="" target="">
<area shape="polygon" alt="" title="button4" coords="14,240,148,209,146,252,12,284" href="" target=""> <area shape="polygon" alt="" title="button5" coords="14,308,147,278,148,319,14,351" href="" target="">
</map> <img src="Images/bg.png"></td><td><div align="right"><iframe height="65" width="450"></iframe></div>
<iframe height="350" width="700"></iframe></td> </tr> </tbody>
</table> <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 area 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; // equalize event models var elem = (evt.target) ? evt.target : evt.srcElement; var imgClass = elem.parentNode.name; // get map
element name var coords = elem.coords.split(","); // convert coords to clip var clipVal = "polygon(" + 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> </html>