使用背景

在把設(shè)置圖轉(zhuǎn)成頁面的時候，時常會遇到這種情況：一張小圖片上有好多個可以點(diǎn)擊的小圖標(biāo)，按常規(guī)的處理方法是把這一個一個的小圖切出來，然后每個加個a標(biāo)簽進(jìn)行跳轉(zhuǎn)，但是這樣會非常的浪費(fèi)時間，而且會增加頁面圖片的數(shù)量，拖慢頁面的加載速度，所以下面我們就以這張圖片為例，在上面3個小圖片上加map跳轉(zhuǎn)。

?

map-area的使用

在img標(biāo)簽有一個usemap的屬性，值為map的id或者name，帶有map的圖片形式：

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

map和area標(biāo)簽

　　　　 <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屬性，就是點(diǎn)擊要跳轉(zhuǎn)的目標(biāo)地址
• area的target和alt屬性，和<a>屬性一樣，不多說
• area的coords屬性，表示矩形左上角和右下角這兩點(diǎn)的坐標(biāo)，我們就以上圖為例，看下怎么算坐標(biāo)

?

計算坐標(biāo)

首先我們打開photoshop，我用的是photoshop cc，快捷鍵ctrl+r（mac下為command+r）打開標(biāo)尺

我們可以通過紅色方框的位置就是我們需要的2個點(diǎn)，通過標(biāo)尺線我們就可以得到對應(yīng)的坐標(biāo)（75，0，336，148）。

能過這種方法能夠精確的得到坐標(biāo)，如果要想不是特別精確的取坐標(biāo)，我們可以通過QQ的截圖工具來取，這里不再演示了！

?

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

轉(zhuǎn)載于:https://www.cnblogs.com/yuqingfamily/p/6869566.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。