Printable View
I have a span roll over on my webpage and being a begginer I cannot figure out how to get my roll over image to center over top of the current image. It worked with ie7 but does not work in other browsers. Please take a look at my page an see if anyone can help me. http://www.markgarro.com/bat.html
Thank you
Glenn
Try this code :
For more info : Click hereCode:<head>
<script>
var clipNums=new Array(21,81,95,155,170,230,243,317);
function positionMap() {
document.getElementById('over').style.left = document.getElementById('off').offsetLeft;
document.getElementById('over').style.top = document.getElementById('off').offsetTop;
}
function imgRoll(i){
document.getElementById('over').style.clip="rect(0 "+clipNums[i]+" 19 "+clipNums[i-1]+")";
document.getElementById('over').style.visibility='visible'
}
function imgOut(){
document.getElementById('over').style.visibility='hidden'
}
</script>
<style>
#over{position:absolute;visibility:hidden;z-index:10;}
</style>
</head>
<body onload="positionMap();" onresize="positionMap();">
<map name="a">
<area shape="rect" coords="21,0,81,19" href="#" onmouseover="sh(1);" onmouseout="mo();">
<area shape="rect" coords="95,0,155,19" href="#" id="mnu1" onmouseover="imgRoll(3);" onmouseout="imgOut();">
<area shape="rect" coords="170,0,230,19" href="#" id="mnu2" onmouseover="imgRoll(5);" onmouseout="imgOut();">
<area shape="rect" coords="243,0,317,19" href="#" id="mnu3" onmouseover="imgRoll(7);" onmouseout="imgOut();">
</map>
<img src="/link_imgmap_on.gif" id="over" usemap="#a" border="0" width="322" height="19">
<img src="/link_imgmap.gif" id="off" usemap="#a" border="0" width="322" height="19">
</body>
I am so lost with your response. I am sure you are giving me the right info but what you posted is way out of my league. I am not sure where to put any of it. Most of what I have done was by doing google searches and using dreamWeaver. Any help would be great.
Thank you