如何在鼠标悬停时使用jQuery和HTML5 标签突出显示图像区域
响应式和移动友好型图像技术,可改善您的前端开发体验
在此博客中,我将向您展示如何使用jQuery和HTML5 <map>标记突出显示鼠标悬停时的图像区域。
步骤1:寻找图片
您可以使用任何想要的图像。
如果您想继续前进,可以使用这个世界的示例图像 。
第2步:绘制坐标
图像地图是具有可点击区域的图像。
从技术上讲,HTML5图像映射是客户端的,是通过根据x和y坐标定义每个区域来制作的
使用Image Map Generator ,我们可以轻松上传图像,选择所需区域,并自动生成HTML代码。
如上所示,我使用了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">
而已!
MapHilight + HTML5 <Map>获胜!
鼠标悬停时突出显示图像是HTML5和jQuery可以完成的很酷的功能之一。 也可以更改突出显示的颜色,并添加链接以将用户定向到您网页的其他部分。
尝试给maphilight开枪! 如果您还有其他方法可以解决上述问题,或者您对上面的示例有任何疑问,请在下面留言以告知我。
感谢您的阅读-请在此处关注我,以获得更多有趣的软件工程文章!