javascript插件库的应用：mapper.js实现图片热点的hover高亮效果

在HTML中，链接有对应的hover高亮显示属性，但是对图片热点来说，是没有高亮的选项的，因此需要调用插件来实现该功能。

准备工作

热点图片的制作：使用过多前后端分离软件的程序猿，可能webstorm、subtime、Atom、VScode等工具烂熟于心，但是对图片特点的设置，比较下来还是推荐Dreamweaver。

引入mapper.js库

图片热点切分好后，需要下载mapper.js，并将该文件通过script脚本引入HTML。

使用方法 高亮显示设置

在切好的热点图片中设置class="mapper"和mapper.js发生联系

area区域设置

多个area区域设置

设置不同的id即可

初始区域的属性强制一组

class类设置手册

1. 高亮区域透明度iopacity50： min=1 max=100 default=33

2. 高亮颜色属性icolor：min=000000 max=ffffff default=000000

3. 高亮边框属性noborder：无边框

4. 边框的颜色iborder：min=000000 max=ffffff default=0000ff

5. 组合使用

6. 创建函数

    function showCoords(map_name, area_id, xpos, ypos, width, height) {
        console.log(map_name);
    }

Done！