jquery鼠标悬停_如何使用jQuery和HTML5 标记以在鼠标悬停时突出显示图像区域

jquery鼠标悬停

响应式和移动友好型图像技术，可改善您的前端开发体验

在此博客中，我将向您展示如何使用jQuery和HTML5 <map>标签在鼠标悬停时突出显示图像区域。

步骤1：寻找图片

您可以使用任何想要的图像。

如果您想继续前进，可以使用这个世界的示例图像 。

图片由rawpixel在Unsplash上拍摄

第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">

而已！

使用jQuery和HTML5突出显示图像地图区域的完整代码和工作示例

MapHilight + HTML5 <Map>获胜！

鼠标悬停时突出显示图像是HTML5和jQuery可以完成的很酷的功能之一。 也可以更改突出显示的颜色并添加链接以将用户定向到您网页的其他部分。

尝试给maphilight开枪！ 如果您有其他方法可以解决上述问题，或者您对上面的示例有任何疑问，请在下面留言以告知我。

感谢您的阅读-请在此处关注我，以获得更多有趣的软件工程文章！

翻译自: https://hackernoon.com/how-to-use-jquery-and-html5-map-tag-to-highlight-image-areas-on-mouseover-b7c728947ed3

jquery鼠标悬停