jquery鼠标悬停
响应式和移动友好型图像技术,可改善您的前端开发体验
![](https://i-blog.csdnimg.cn/blog_migrate/5fdfff3fbc293fd536f7cfe002d941c5.png)
在此博客中,我将向您展示如何使用jQuery和HTML5 <map>标签在鼠标悬停时突出显示图像区域。
步骤1:寻找图片
您可以使用任何想要的图像。
如果您想继续前进,可以使用这个世界的示例图像 。
![](https://i-blog.csdnimg.cn/blog_migrate/4ce653c4366bf81874b11b639f9e4403.png)
第2步:绘制坐标
图像映射是具有可点击区域的图像。
从技术上讲,HTML5图像映射是客户端的,是通过根据x和y坐标定义每个区域来制作的
使用Image Map Generator ,我们可以轻松地上传图像,选择所需的区域,并自动生成HTML代码。
![](https://i-blog.csdnimg.cn/blog_migrate/ae8bd15e33cc8b73547aac7662f778d9.png)
如上所示,我使用了Poly形状来选择南美。 您也可以使用圆形和矩形。
现在我们有了图像和地图坐标,下一步是将其放在代码编辑器中,并添加一些Javascript以实现鼠标悬停的效果。
步骤3:套用jQuery
使用codepen作为我们的在线HTML / CSS / JS编辑器,我们可以将代码粘贴到HTML部分中。
<img src=" https://cdn-images-1.medium.com/max/1600/0*H8odJZNPmo13lEJ2 " usemap="#image-map">
<map name="image-map">
<area target="" alt="" title="" href="" coords="421,528,383,596,424,672,416,828,455,850,486,836,548,726,613,610,581,583,544,568,461,508" shape="poly">
</map>
下一步是导入两个javascript库: jQuery和Maphilight 。
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js "></script>
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js "></script>
遵循Maphilight的文档,我们将使用它们的功能:
$(function() {
$('.map').maphilight();
});
由于我们使用地图类定位每个对象,因此我们需要更新img对象以包括地图类。
<img src=" https://cdn-images-1.medium.com/max/1600/0*H8odJZNPmo13lEJ2 " usemap="#image-map" class="map">
而已!
![](https://i-blog.csdnimg.cn/blog_migrate/62d4a6eefb009c4dd0ae7d1227ab3bba.png)
MapHilight + HTML5 <Map>获胜!
![](https://i-blog.csdnimg.cn/blog_migrate/ecee09a5475df1e0a7550215f93bff7e.png)
鼠标悬停时突出显示图像是HTML5和jQuery可以完成的很酷的功能之一。 也可以更改突出显示的颜色并添加链接以将用户定向到您网页的其他部分。
尝试给maphilight开枪! 如果您有其他方法可以解决上述问题,或者您对上面的示例有任何疑问,请在下面留言以告知我。
感谢您的阅读-请在此处关注我,以获得更多有趣的软件工程文章!
jquery鼠标悬停