使用背景

在把設置圖轉成頁面的時候，時常會遇到這種情況：一張小圖片上有好多個可以點擊的小圖標，按常規的處理方法是把這一個一個的小圖切出來，然后每個加個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

轉載于:https://www.cnblogs.com/yuqingfamily/p/6869566.html

總結

以上是生活随笔為你收集整理的HTML的map-area的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。