html图片热区map、area的使用

html图片热区map、area的使用

在项目中需要点击图片某个位置，然后变换不同的颜色。
之前听说dw可以通过拖拽实现，也可以通用canvas画布实现，但是太麻烦了
而map的area可以定义一个坐标位置然后点击处理，因为在项目中只是需要
变换所点击的不规则区域的位置，然后进行图片切换就可以，可以使用css定位
然后禁止area的跳转即可

<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。
       坐标的数字及其含义取决于 shape 属性中决定的区域形状。
       可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等
属性
shape: circle(圆形) | polygon(多边形) | rectangle(矩形)
coords: 定义在area上点击的的对应坐标点(x,y)
        * 原形是(x,y,z)
href:跳转链接

项目中是车辆维修，如：我点击了车辆引擎盖，就切换车辆引擎盖的颜色，难点在于，引擎盖是一个不规则形状，
不能准确的确定引擎盖的各个坐标点的位置，也就不能确定到底是点击了什么部位，最后找到一款软件，上传图片
然后点击不规则

<div class="imgMap">
    <img src="./images/carhead.png" usemap="#carhead" width="625" height="457" border="0" style="border: none"/>
    <map id="carhead" name="carhead" @click="onHead($event)">
        <area shape="poly" alt="" data-href="前-引擎" href="javascript:;" data-seat="engine"
              coords="73,143,166,151,251,148,386,147,472,149,548,142,549,182,532,208,444,227,180,226,95,210,71,172"/> </map>
</div>
<div class="cat-location">
    <div class="carhead carBody">
        <!-- 前 - 引擎-->
    <div class="headEngine" :style="{backgroundPositionX:head.engine}"></div>
</div>
       

    methods:{      
         // 点击每次切换图片位置  
         onHead(e) {
             let seat = e.target.dataset.seat;
             this.head[seat] = this.head[seat] == 0 ? '100%' : 0;
             console.log(seat)
         }
    }

在写的过程中遇到的问题

1. 不能确定车辆上不规则图片的位置

   • 软件解决

2. 如果浏览器窗口改变，那么不规则图形位置也需要改变，当然，也可以直接控制还图片大小
   在不同的窗口大小，展示一样的图片，这样定位位置不容易改变

   • https://github.com/stowball/jQuery-rwdImageMaps
   • 使用resize在窗口大小改变时，重新计算定位位置

3. 如果使用jQuery-rwdImageMaps在点击图片有隐藏显示功能时,会获取不到图片的宽高
   这样就不能准确的设置area的coords属性

   • 提前设置好图片的宽高

相关软件

链接：https://pan.baidu.com/s/1RV0vffrsxHoI9hGrm6fUCw
提取码：5biu

相关

https://www.w3school.com.cn/tags/tag_area.asp
https://www.cnblogs.com/mq0036/p/3337327.html
https://github.com/stowball/jQuery-rwdImageMaps