需求
通过监听点击图片的某个范围绑定事件。
如何设置html热区？
利用img结合map和area标签锁定热区
HTML <map> 属性 与 <area> 属性一起使用来定义一个图像映射(一个可点击的链接区域).
使用方式
在线图片坐标拾取工具
map
<img th:src="@{/images/front.png}" border="0" usemap="#front" alt="front" title="车头">
<map name="front" id="front">
<area shape="rect" coords="45,36,65,86" id="firstLeft"/>
<area shape="rect" coords="207,38,227,85" id="firstRight"/>
<!-- 可以绑定更多热区... -->
</map>
我们需要在img设置usemap来与map标签确定绑定关系. 如以上使用的是front绑定两者关系
area
shape 属性用于定义图像映射中对鼠标敏感的区域的形状：
- 圆形（circ 或 circle）
- 多边形（poly 或 polygon）
- 矩形（rect 或 rectangle）
coords 给热点区域设定具体的坐标值。
- 这个值的数值和意义取决于这个值所描述的形状属性。
- 对于矩形或长方形, 这个coords值为两个X,Y对：左上、右下。
- 对于圆形, 这个值是
x,y,r，这里的x,y是一对确定圆的中心的坐标而r则表示的是半径值.。 - 对于多边和多边形，这个值是用x,y对表示的多边形的每一个点：
x1,y1,x2,y2,x3,y3,等等。
area标签还可以绑定href来实现热区点击跳转, 但这部分我需求没用到, 可以给热区域绑定id, 来结合业务需求实现功能, 如我是用热区域id绑定了点击事件
更多扩展属性, 可看这里
所以结合以上的例子来看, 我使用的热区域形状是矩形, 并且指定了热区矩形左上角的x1,y1和右下角的x2,y2坐标来确定热区范围的
扩展
点击不同热区锁定到不同input焦点
主要是两点
1. 确定热区和input的联系
如我需求中可通过索引确定两者联系, 即左上第一个热区对应的是列表第一行表单.
2.通过索引绑定焦点
这里关键点是用jquery获得索引对应的input标签对象, 再使用focus焦点事件锁定焦点
//车头热区点击事件
$('#front area').click(function(event){
//area热区id
let {id} = event.currentTarget;
let carFrontTireArea = constantsExt.carFrontTireArea[id];
let {text,num} = carFrontTireArea;
const focusTd = $('#editTable tbody tr').eq(num-1)[0];
const custLidInput = $(focusTd).find('td[data-field="custLid"] input')[0];
custLidInput.focus();
});
当然, 如果想要焦点更直观, 我们可以利用css伪类给获取焦点时的input加点css效果:
input:focus
{
background-color: yellow;
}
