H5 圖片熱點區域

時間 2019-12-06

標籤 h5 圖片熱點區域简体版

原文原文鏈接

應用場景html

不規則按鈕的響應
一張圖片設置多個響應域

使用方法this

利用usemap屬性，構建一個map標籤spa

<!DOCTYPE html>
<!--先設置一個usemap屬性，而後下面的map利用這個名字加以鏈接-->
<img src="xxx.png" usemap="#map"
<map name="map">
  <!--設置一個圓形的座標相對於圖片爲（20，20），半徑爲20的圓形區域 ，onFocus="this.blur()" 去掉虛線框-->
  <area shape="circle" coords="20,20,20" title="1111111" href="xxxx" onFocus="this.blur()">
  <!--設置一個左上角座標爲（100，100），右下角座標爲（200，200）用來定位矩形的位置-->
  <area shape="rect" coords="100,100,200,200" title="222222222" href="xxxx">
  <!--設置一個不規則區域-->
  <area shape="poly" coords="0,0,200,0,200,200,100,300,0,200" href="xxxx" title="3333333333">
</map>
複製代碼

shape屬性code