一、场景

引入了vue的单一html页面中，一张大图片，不做切图，实现点击图上某一部分，触发功能

二、语法

• HTML \<img> 标签的 usemap 属性
• HTML \<map> 标签
• HTML \<area> 标签
• HTML \<area> 标签的 shape 属性
• HTML \<area> 标签的 coords 属性
• test： W3School TIY Editor

三、问题

1.图片大小略高于一般设备的尺寸

一般 h5 中都是宽度拉满，高度自适应，因此重点关注宽度（浏览器F12常见移动端宽度尺寸）：

• iPhone SE: 375
• iPhone XR: 414
• iPhone 12 Pro: 390
• Pixel 5: 393
• ...

而由于 coords 的值是取 img 所在容器尺寸即设备尺寸，因此需要做简单的比例计算：

let img = new Image()
img.src = './images/bg.png'
// let coords = `0,${window.innerWidth * img.height/img.width *80%* img.height/img.height},${window.innerWidth},${window.innerWidth*img.height/img.width}`
let coords = `0,${window.innerWidth * img.height / img.width * 80%},${window.innerWidth},${window.innerWidth * img.height / img.width}`

需要的部分恰好从80%高度的位置开始到底

其他形状也可用矩形比例定位法处理

四、代码

<img src="./images/bg.png" alt="" usemap="#img_map">
<map name="img_map" id="img_map">
  <area href="#btn_group" shape="rect" :coords="coords"/>
</map>

let img = new Image()
img.src = './images/bg.png'
// let coords = `0,${window.innerWidth * img.height/img.width *80%* img.height/img.height},${window.innerWidth},${window.innerWidth*img.height/img.width}`
this.coords = `0,${window.innerWidth * img.height / img.width * 80%},${window.innerWidth},${window.innerWidth * img.height / img.width}`

over