Javascript 为什么我的图像切换器在IE中不工作
访问:查看我的示例: 代码如下:Javascript 为什么我的图像切换器在IE中不工作,javascript,internet-explorer,mouseover,Javascript,Internet Explorer,Mouseover,访问:查看我的示例: 代码如下: <!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
<!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
无标题文件
函数图显示(哪个)
{
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;
}
因此,上面的页面代码在firefox和chrome中可以完美地工作。它在IE中没有任何作用。这个想法是在鼠标的上方或上方状态下,背景图像将发生变化。如果有更简单的解决方案,我很乐意看到。我是Javascript的新手 IE似乎不喜欢将鼠标事件传递给它看不见的元素。如果触发器div上没有背景或可见文本,mouseover事件将直接通过它们
基本上,您必须为触发器div提供一个背景或内容,该背景或内容覆盖您希望鼠标移动的区域。IE不关心背景的内容,只要背景在那里并且颜色不是“透明的”。您甚至可以使用1x1透明GIF作为背景,只要您平铺它。浏览器多年来一直支持在任意元素上悬停。只是说说而已。你真的不需要JS。我理解浏览器支持:hover,但是如果你看这个例子,我必须在一个悬停状态下获得3个图像来更改。这是图像被切片的主要原因。如果你将它们切片,使每一个都是一个大图像或一个小图像…并使每个大图像成为相应小图像的div的子图像…等等,让我举一个例子。当一个图像变大时,其他两个图像必须变小。我可以用每一个单独的图像来完成它,而不是其他2个。想想看,当你在一个滴水上吸着时,你并没有在其他两个上面乱涂。所以使用CSS,它们会自动变小,因为它们不会被悬停在上面。非常感谢这回答了我的问题。