HTML/Javascript 在区域鼠标悬停上覆盖图像答案

【问题标题】：HTML/Javascript Overlaying Images on Region MouseoversHTML/Javascript 在区域鼠标悬停上覆盖图像
【发布时间】：2011-10-18 23:56:01
【问题描述】：

所以我在页面上有一个图像和一个与该图像对应的图像映射，然后我也有两个对应的图像，每个图像的大小都与我想在某个区域时叠加到该图像上的第一个（大部分是透明的）相同图像映射的鼠标悬停在上面。我将如何去做，这是我可以用 CSS 完成的事情还是我需要 javascript 来完成它？

【问题讨论】：

标签： javascript html image map mouseover

【解决方案1】：

我认为您确实需要 Javascript，因为并非所有浏览器都支持 <a> 以外的元素上的 css hover psuedo-class。你应该能够用最少的 Javascript 来做到这一点。查看<map> 标签：http://www.w3schools.com/tags/tag_map.asp

例如，如果您想将鼠标悬停在图像 (image1.png) 左上角的 100 x 100 像素正方形上以启用叠加图像 (image2.png)：

<script type="text/javascript">
    function area1_mouseover() {
        document.getElementById('image2').style.visibility = 'visible';
    }
    function area1_mouseout() {
        document.getElementById('image2').style.visibility = 'hidden';
    }
</script>
<img src="image2.png" id="image2" style="position: absolute; visibility: hidden; z-index: 2;" usemap="#my_map" />
<img src="image1.png" id="image1" usemap="#my_map" />
<map name="my_map">
    <area shape="rect" coords="0,0,100,100" onmouseover="area1_mouseover();" onmouseout="area1_mouseout();" />
</map>

编辑：将地图应用于所有图像应该可以解决这个问题，因为它们都是相同的大小。

【讨论】：

我现在遇到的问题是图像闪烁进出我假设是因为它们被放在图像映射上？