在HTML中，链接有对应的hover高亮显示属性，但是对图片热点来说，是没有高亮的选项的，因此需要调用插件来实现该功能。
准备工作
热点图片的制作：使用过多前后端分离软件的程序猿，可能webstorm、subtime、Atom、VScode等工具烂熟于心，但是对图片特点的设置，比较下来还是推荐Dreamweaver。
引入mapper.js库
图片热点切分好后，需要下载mapper.js，并将该文件通过script脚本引入HTML。
<script type="text/javascript" src="mapper.js"></script>
使用方法
高亮显示设置
在切好的热点图片中设置class="mapper"和mapper.js发生联系
<img src="..." class="mapper" usemap="..." alt="...">
area区域设置
<area shape="poly" class="noborder icolor00ff00" href="#" coords="...">
多个area区域设置
设置不同的id即可
<area shape="poly" id="blue" rel="green,red" href="#" coords="..."> <area shape="poly" id="green" rel="red,blue" href="#" coords="..."> <area shape="poly" id="red" rel="green,blue" href="#" coords="...">
初始区域的属性强制一组
<area shape="rect" id="black" class="icolor000000 forcegroup" rel="green,red,blue" href="#" coords="...">
class类设置手册
- 1.高亮区域透明度
iopacity50： min=1 max=100 default=33
<area shape="rect" id="black" class="iopacity50" rel="green,red,blue" href="#" coords="...">
- 2.高亮颜色属性
icolor：min=000000 max=ffffff default=000000
<area shape="rect" id="black" class="icolorff0033" rel="green,red,blue" href="#" coords="...">
- 3.高亮边框属性
noborder：无边框
<area shape="rect" id="black" class="noborder" rel="green,red,blue" href="#" coords="...">
- 4.边框的颜色iborder：min=000000 max=ffffff default=0000ff
<area shape="rect" id="black" class="iborder000000" rel="green,red,blue" href="#" coords="...">
- 5.组合使用
<area shape="poly" id="beijiang" class="noborder icolorff0033 forcegroup" rel="green,red,white" onmouseover="showInfo('0')" onmouseout="hideInfo()" onclick="showCoords()" coords="429,96,517,70,515,106,507,155,501,168,487,183,476,205,468,230,453,229,449,227,450,204,447,198,451,147,451,131" href="#">
- 6.创建函数
function showCoords(map_name, area_id, xpos, ypos, width, height) { console.log(map_name); }
Done！
