HTML的map-area的使用

使用背景

在把設置圖轉成頁面的時候，時常會遇到這種狀況：一張小圖片上有好多個能夠點擊的小圖標，按常規的處理方法是把這一個一個的小圖切出來，而後每一個加個a標籤進行跳轉，可是這樣會很是的浪費時間，並且會增長頁面圖片的數量，拖慢頁面的加載速度，因此下面咱們就以這張圖片爲例，在上面3個小圖片上加map跳轉。

 

map-area的使用

在img標籤有一個usemap的屬性，值爲map的id或者name，帶有map的圖片形式：

<img src="abc.jpg" alt="abc" usemap="#myMap">

map和area標籤

　　　　 <map name="myMap" id="myMap"><br>　　
            <area shape="rect" coords="75, 0, 336, 148" href="http://www.baidu.com" target="_blank" alt="baidu">
        　　<area shape="rect" coords="370, 0,610, 148" href="http://www.google.com" target="_blank" alt="google">
        </map>

• map有id和name屬性，最好把id和name屬性都寫上，這樣有更好的兼容性。
• area的shape屬性，爲好多的值，其中最經常使用的是rect（矩形）和circ（圓形）
• area的href屬性，就是點擊要跳轉的目標地址
• area的target和alt屬性，和<a>屬性同樣，很少說
• area的coords屬性，表示矩形左上角和右下角這兩點的座標，咱們就以上圖爲例，看下怎麼算座標

 

計算座標

首先咱們打開photoshop，我用的是photoshop cc，快捷鍵ctrl+r（mac下爲command+r）打開標尺

咱們能夠經過紅色方框的位置就是咱們須要的2個點，經過標尺線咱們就能夠獲得對應的座標（75，0，336，148）。

能過這種方法可以精確的獲得座標，若是要想不是特別精確的取座標，咱們能夠經過QQ的截圖工具來取，這裏再也不演示了！

 

摘自：http://www.cnblogs.com/sunhk/p/4524395.html