map標籤的應用

1.map標籤

帶有可點擊區域的圖像映射，一張圖片能夠有多個不一樣可點擊區域，，每一個區域點擊後跳轉頁面不一樣

2.示例

<img src="./images/345.jpg" alt="" srcset="" usemap="#mp">
    <map name="mp" id="mp">
        <area shape="rect" coords="20,20,80,80" href="#d1" alt="1">
        <area shape="circle" coords="300,20,50" href="#d2" alt="">
        <area shape="poly" coords="0,20,80,80,60,120" href="#d3" alt=""> 
    </map>
複製代碼

3.shape參數說明

rect：矩形區域，4個數字兩兩組合造成座標；

circle：圓形區域，前兩個肯定圓心，第三個參數肯定半徑；

poly：多邊形區域，兩個數值肯定一個座標，6個數值肯定3個座標，就能夠組成一個三角形區域

4.爲何不用<a>標籤？他的用法不止應用於圖片

經過area標籤的href和alt屬性能夠看到，這兩個標籤幾乎有相同的功能，可是在特定需求下，咱們須要將某個div元素上，中間上半部分跳轉到a地址，其他地方跳轉到b地址（腦補劉海屏），傳統作法是將html經過css浮動定位等方式來排布，比較麻煩。而a標籤不能嵌套使用，在瀏覽器解析過程當中，會將兩個嵌套的a標籤解析爲同級的a標籤； 在這種狀況下，咱們可使用area標籤，給div添加熱區映射到不一樣的跳轉（添加一個矩形，添加一個多邊形）。

5.侷限

• <area>標籤實際上能夠脫離<map>正常使用，就像普通的<a>標籤同樣，他一樣不支持嵌套
• Firefox瀏覽器不支持（Firefox的<area>元素默認display:none，且沒法重置）
• 沒法使用鍵盤Tab索引訪問

6.侷限的解決辦法

在圖片上使用，沒毛病的老鐵，只要別出圖片範圍

7.總結

有價值，圖片上映射不一樣的點擊區域，很方便，可是在div元素上直接取巧使用，會有兼容問題