Javascript将鼠标悬停在PNG图像的可见部分答案

【问题标题】：Javascript Hover over visible part of PNG imageJavascript将鼠标悬停在PNG图像的可见部分
【发布时间】：2016-01-28 08:17:45
【问题描述】：

有没有办法让我检查鼠标是否在 PNG 图像的可见部分上？

每个部分都是它自己的图像，具有透明背景，例如：

所以基本上我希望每个区域的不透明度在悬停时为 1，而在不悬停时不透明度为 0.5。因此，用户可以看到悬停在哪个区域上。

如果鼠标在图像上的位置 != 透明则有类似 onmouseover 的东西...

【问题讨论】：

使用纯 PNG 无法做到这一点 - 悬停事件是在整个图像上触发的，而不是在不透明区域上。使用 SVG 将最适合您的需求。您也可以使用图像映射，但它已经过时了。
试试图片地图！ www.image-maps.com/ 看看 www.galerijaziema.lv/ziema.php
嘿，罗里！如果我有图像的 SVG 版本，我将如何让它工作？我可以在 Illustrator 中将它们全部转换为 SVG
最好将如何使用 SVG 做到这一点作为一个单独的问题（假设之前没有被问过），因为您已经在此处获得了关于如何使用 PNG 做到这一点的答案，那就是原来的问题。

标签： javascript jquery html css hover

【解决方案1】：

在 HTML5 中可编程，无需任何工具或手动构建

【讨论】：

这似乎是一种有趣的方式。你能发布一些代码让我开始吗？

【解决方案2】：

Take specific image in two copy.one before href link and next next href link images..


<script type='text/javascript'>
    $(document).ready(function()
      {
   $(".button").hover(function() 
      {
    $(this).attr("src","button-hover.png");
      }, 
  function() 
     {
    $(this).attr("src","button.png");
     }
   );
  }   
  );
 </script>

 <body>
 <img src="button.png" alt="My button" class="button" />
 </body>
 </html>

【讨论】：

鼠标进入透明区域时.hover不会触发吗？

【解决方案3】：

看看http://www.w3schools.com/tags/tag_area.asp

您可以拍摄图像，您将通过使用一些图像工具（如 photoshop 等）获得每个多边形的线，您可以处理图像区域标签中特定区域的每个悬停事件。

简单易用，制作可点击的地图。

【讨论】：

我使用 Kirstine 的 www.image-maps.com 链接获取所有坐标，然后使用您的地图区域标签绘制区域！谢谢！