前端點擊圖片的某個區域進行映射

比如現在UI同事給了你一張圖【如下】，讓你在點擊這個圖的每一個行星的時候進行頁面跳轉。

那麼首先我們先引入這個圖片：

<img src="planets.png" alt="Planets" usemap="#planetmap">

請注意一個特殊的屬性：usemap。翻譯成中文就是使用地圖。其實map在html當中也是一個標籤。我們想要在點擊圖片的某個區域進行跳轉或者其他操作的時候就會關聯到這個上面【你用js去計算不閒麻煩的話也可以】。

接下來我們來看這個map標籤是怎麼被img標籤usemap關聯上的。

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

根據上面代碼我們就可以很清楚的知道了是通過map標籤的name屬性與img標籤的usemap保持一致而後關聯上的【注意：img標籤前面要加#號】
然後我們現在在學習一下這些英文單詞，這樣能對我們對這個map標籤和area標籤使用的更加順手：
area：區域的意思
shape：形狀的意思
coords：座標的意思
那麼我們根據它的這個就可以猜出：
1.首先img需要與map關聯起來
2.map裏的子標籤area是用來說明點擊範圍然後要做什麼事情的
3.shape是需要你說明你要點擊的範圍是什麼形狀【可選參數：rect(矩形)、circle(圓形)、poly(多邊形)】
4.coords是需要你說明你要點擊的形狀他的座標、半徑參數。不同的形狀coords傳入的參數意義不同。具體如下：
1、矩形：(左上角頂點座標爲(x1,y1)，右下角頂點座標爲(x2,y2))
<area shape=“rect” coords=“x1,y1,x2,y2” href=url>
2、圓形：(圓心座標爲(X1,y1)，半徑爲r)
<area shape=“circle” coords=“x1,y1,r” href=url>
3、多邊形：(各頂點座標依次爲(x1,y1)、(x2,y2)、(x3,y3) …)
<area shape=“poly” coords=“x1,y1,x2,y2 …” href=url>

當然現在很少有用這個進行跳轉的了，大部分的需求都是點擊某個區域進行xxx事情。所以，我們給他一個href屬性：“javascript:;”，然後在給這個area加個點擊事件即可~如下所示：

建議朋友們自己搞一個圖片做個小demo玩一玩。就熟悉了。

<img src="./20200226201320876.png" width="145" height="126" alt="" usemap="#map">
<map name="map">
    <area shape="rect" coords="0,0,82,126" href="javascript:;" alt="hah" onclick="areaClick()">
</map>
<script>
    function areaClick(){
        alert('哇哦!!!')
    }
</script>