Question

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

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

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

如果鼠标位于图像上，那么是否有类似onmouseover的东西！=透明然后......

Answer 1

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

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

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

Answer 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>

Answer 3

可在HTML5中编程，无需任何工具或手动构建＆lt; map＆gt; ＆lt; area shape = poly coords =＆＃34; 325,25,262，....＆gt;

将图层加载到许多隐藏的画布中。
监控鼠标光标基本图像的相对位置。
检查每个画布上的位置偏移相同像素是白色还是非白色。
相应地切换不透明度

挑战

性能
还支持触摸和无悬停设备

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

3 个答案: