Why does my image switcher not work in IE
Question
Visit : to see my example: http://www.nycthirst.com/test-space/test-orig-best.html
Here is the code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
div#GHOLD { position: relative; width: 400px; height: 464px;
}
div.gname { position: absolute; top: 7px; left: 0px; height: 23px; text-align: center;
/*border: solid black 1px; padding-top: 4px;*/
z-index: 20;
}
div.bname { position: absolute; top: 3px; left: 0px; height: 27px; text-align: center;
padding-top: 4px;
/*border:solid black 1px;*/
z-index: 25;
}
div.ihold { position: absolute; top: 36px; left: 0px;
width: 400px; height: 360px; z-index: 10;
}
img.bgraph { border: none; width: 400px; height: 360px; z-index: 10; }
-->
</style>
<script type="text/javascript">
function graphShow(which)
{
var ghold = document.getElementById("GHOLD");
var gdivs = ghold.getElementsByTagName("DIV");
gdivs[0].className = gdivs[1].className = gdivs[2].className = "gname";
gdivs[which].className = "bname";
gdivs[3].style.zIndex = gdivs[4].style.zIndex = gdivs[5].style.zIndex = 10;
gdivs[which+3].style.zIndex = 15;
}
</script>
</head>
<body>
<div id="GHOLD">
<div class="bname" style="left: 39px; width: 77px; height: 135px; top: 35px;" onMouseOver="graphShow(1);"></div>
<div class="gname" style="left: 162px; width: 77px; height: 135px; top: 35px;" onMouseOver="graphShow(0);"></div>
<div class="gname" style="left: 280px; width: 77px; height: 135px; top: 35px;" onMouseOver="graphShow(2);"></div>
<div class="ihold" style="z-index: 15;">
<img class="bgraph" src="http://www.asme.org/wwwasmeorg/media/ASMEMedia/Events/Energy/energy_landing_page_drop1.png" alt="95 percent">
</div>
<div class="ihold">
<img class="bgraph" src="http://www.asme.org/wwwasmeorg/media/ASMEMedia/Events/Energy/energy_landing_page_drop2.png" alt="69 percent" style="z-index: 10;">
</div>
<div class="ihold">
<img class="bgraph" src="http://www.asme.org/wwwasmeorg/media/ASMEMedia/Events/Energy/energy_landing_page_drop3.png" alt="52 percent" style="z-index: 10;">
</div>
</div>
</body>
</html
>
So here is the deal the page code above works perfectly in firefox and chrome. It does not do a thing in IE. The idea is on a mouse over or over state the background image will change. IF there is an easier solution I would love to see it. I am a bit of a novice with Javascript.
1 answers
solution1
0 ACCPTED 2013-02-13 00:06:52
IE doesn't seem to like passing mouse events to elements that look invisible to it. If you don't have a background or visible text on your trigger divs, the mouseover event just passes right through them.
You basically have to give the trigger divs a background, or content, that covers the area you want mouseovers to happen on. IE doesn't care about the content of the background, as long as it's there and isn't the color "transparent". You should even be able to get away with using a 1x1 transparent GIF as the background, as long as you tile it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.