圖片熱區 Picture hot zone

前序：目前作的電商項目是經過管理系統生成了頁面配置的json數據生成活動頁，
其中有一個圖片熱區組件，經過給圖片畫區域，進行點擊不一樣區域跳轉不一樣連接。

圖片熱區github地址

HTML圖片熱區map area的用法

1.如何實現熱區

剛開始想的是，經過後臺配置的圖片定位座標x，y軸進行畫盒子加一個點擊事件。搜了下熱區，而後發覺html自帶有熱區的標籤的map和area。這個方案簡直o了

2.簡單介紹下使用

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

主流瀏覽器都支持 <area> 標籤。
定義和用法：
<area> 標籤訂義圖像映射中的區域（注：圖像映射指得是帶有可點擊區域的圖像）。
area 元素老是嵌套在 <map> 標籤中。

ps：<img> 標籤中的 usemap 屬性與 map 元素 name 屬性相關聯，建立圖像與映射之間的聯繫。
<img> 中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（由瀏覽器決定），因此咱們須要同時向 <map> 添加 id 和 name 兩個屬性。

shape和coords：是兩個主要的參數，用於設定熱點的形狀和大小
coords 屬性規定區域的 x 和 y 座標。
coords 屬性與 shape 屬性配合使用，來規定區域的尺寸、形狀和位置。
圖像左上角的座標是 "0,0"。

參考w3school：https://www.w3school.com.cn/tags/att_area_coords.asp

3.後臺圖片熱區組件設置

繪製時候肯定圖片的寬度生成的點擊區域座標點，前端在拿到座標點後，須要用返回數據的ratio(默認寬/當前元素的可視寬度以座標值)，那麼上面的coords的x，y，nx，ny值ratio就是須要這個纔是咱們前端展現的真正的座標。裏面可能涉及一些邊界控制，以及鼠標滑動畫區域等等


詳細能夠拷貝項目下來看看

圖片熱區github地址