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

Javascript Hover over visible part of PNG image

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

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

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

如果鼠标位置在图像上,是否有类似 onmouseover 的东西!=透明然后...

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

您可以拍摄图像,并通过使用一些图像工具(如 photoshop 等)获取每个多边形的线,并且您可以处理图像区域标记中特定区域的每个悬停事件。

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

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>

它在 HTML5 中是可编程的,无需任何工具或手动构建