html中area标签高亮和添加背景颜色

Area标签高亮

Map area标签的基础知识
公司要求写一个demo案例，需要用到图片热区，此时便想到了html中的map+area功能，该功能可以实现图片热区的添加。具体的Map area百科

Map area的具体用法
https://www.cnblogs.com/mq0036/p/3337327.html

Area标签设置样式的问题
由于用户需求，需要使热区产生背景颜色，本人尝试了许多方法，发现css并不能对area区域产生效果。

使用jquery.maphilight.js库改变area背景
疯狂搜索解决方案，最终找了的jquery.maphilight.js这个神奇的库

效果图片展示
使用的area功能画了矩形边框，可以绑定事件.

图片:

基础使用方法
1、头文件中引入jquery库

// An highlighted block
<script type="text/javascript" src="./js/jquery.maphilight.js"></script>;

2、使用该库（注意选择器选择需要area的图片）

 $('.img').maphilight();

3、在area中使用data-maphilight属性控制背景

<area shape="rectangle" coords="761,66,1025,382" href="javascript:void(0);" alt="Venus" class="group" data-maphilight="{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"ff0000","fillOpacity":0.6}"/>

附上github的实例
其中demo_features.html是一个特别好的案例
https://github.com/kemayo/maphilight
                        

---

原文链接：https://blog.csdn.net/a57321563/article/details/106406104