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

发布于 2024-12-10 09:56:38 字数 144 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

偏爱自由 2024-12-17 09:56:38

我认为您确实需要 Javascript，因为并非所有浏览器都支持除之外的元素上的 css hover psuedo-class。您应该能够使用最少的 JavaScript 来完成此操作。请参阅

标记：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>

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

I think you do need Javascript as not all browsers support css hover psuedo-class on elements other than <a>. You should be able to do it with minimal Javascript. See the <map> tag: http://www.w3schools.com/tags/tag_map.asp

For example, if you want mousing over the 100 by 100 pixel square in the top left of your image (image1.png) to enable the overlay image (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>

Edit: applying the map to all the images should solve that problem since they are all the same size.

回复收藏 0 原文

~没有更多了~