需求
通過監(jiān)聽點擊圖片的某個范圍綁定事件记罚。
如何設置html熱區(qū)墅诡？
利用img結合map和area標簽鎖定熱區(qū)
HTML <map> 屬性 與 <area> 屬性一起使用來定義一個圖像映射(一個可點擊的鏈接區(qū)域).
使用方式
在線圖片坐標拾取工具
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"/>
<!-- 可以綁定更多熱區(qū)... -->
</map>
我們需要在img設置usemap來與map標簽確定綁定關系. 如以上使用的是front綁定兩者關系
area
shape 屬性用于定義圖像映射中對鼠標敏感的區(qū)域的形狀：
- 圓形（circ 或 circle）
- 多邊形（poly 或 polygon）
- 矩形（rect 或 rectangle）
coords 給熱點區(qū)域設定具體的坐標值。
- 這個值的數值和意義取決于這個值所描述的形狀屬性桐智。
- 對于矩形或長方形, 這個coords值為兩個X,Y對：左上末早、右下。
- 對于圓形, 這個值是
x,y,r说庭，這里的x,y是一對確定圓的中心的坐標而r則表示的是半徑值.然磷。 - 對于多邊和多邊形，這個值是用x,y對表示的多邊形的每一個點：
x1,y1,x2,y2,x3,y3,等等刊驴。
area標簽還可以綁定href來實現熱區(qū)點擊跳轉, 但這部分我需求沒用到, 可以給熱區(qū)域綁定id, 來結合業(yè)務需求實現功能, 如我是用熱區(qū)域id綁定了點擊事件
更多擴展屬性, 可看這里
所以結合以上的例子來看, 我使用的熱區(qū)域形狀是矩形, 并且指定了熱區(qū)矩形左上角的x1,y1和右下角的x2,y2坐標來確定熱區(qū)范圍的
擴展
點擊不同熱區(qū)鎖定到不同input焦點
主要是兩點
1. 確定熱區(qū)和input的聯(lián)系
如我需求中可通過索引確定兩者聯(lián)系, 即左上第一個熱區(qū)對應的是列表第一行表單.
2.通過索引綁定焦點
這里關鍵點是用jquery獲得索引對應的input標簽對象, 再使用focus焦點事件鎖定焦點
//車頭熱區(qū)點擊事件
$('#front area').click(function(event){
//area熱區(qū)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;
}
