圖片映射（HTML 標籤）這麼拽，小夥伴們都知道嗎？

　　在一些購物網站，咱們總能看到一張大圖，上面鋪滿充滿誘惑的禮品，當咱們輕輕地用鼠標單擊一下，就跳轉到這個寶貝的頁面。 對於這個神奇的功能，身邊的小夥伴們每每都被震驚了。要是可以學會這招技能，那該多好啊，之後不再用去找美工切圖，而且也不用爲兼容這種瀏覽器而發愁了。

　　其實，對於這個看起來神奇的功能，實現起來倒是至關的容易。只須要使用HTML的<img>標籤、<map>標籤和<area>標籤就能實現這個強大的功能。可是若是想要把圖片映射作的很強大的話，那也須要頗下一番功夫。不過今天小編已經整理好了攻略，你只須要本文的步驟，就能夠輕鬆掌握這個技能。

　　首先，將想要顯示的圖片，使用HTML標籤將其顯示在頁面中，代碼很簡單，不作過多解釋。可是這裏有一個關鍵的並不經常使用的屬性，那就是usemap，它指定了你要選擇的地圖，也就是使用哪一種地圖方式來展現裏面的連接。示例代碼以下：

<img src="planets.jpg" border="0" usemap="#imgMap" alt="Planets" />

接下來，定義Map地圖，並將Map分塊，用以區分不一樣的內容區域。

　　Map地圖由<map>標籤和<area>標籤組成。<map>標籤的定義很是簡單，只需聲明id和name便可，由於不一樣瀏覽器識別的標籤不同，因此id和name兩者缺一不可。<area>標籤由於不經常使用，下面的圖表展現了各個屬性所表明的的確切含義。

屬性	值	描述
coords	座標值	定義可點擊區域（對鼠標敏感的區域）的座標。
href	URL	定義此區域的目標 URL。
shape	default rect circ poly	定義區域的形狀。
target	_blank _parent _self _top	規定在何處打開 href 屬性指定的目標 URL。

　　Map地圖的示例代碼以下：

<map name="imgMap" id="imgMap">  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> </map>

到此爲止，咱們就能夠輕鬆建立本身的圖片地圖了。然而，對於如何圖片中某個元素的座標對不少小夥伴來講，仍然是一個難題，由於普通的看圖軟件根本沒法查看每一個元素的座標位置。在這裏，給你們推薦一款在線工具：Image-Maps。咱們只需在Image-Maps 上註冊一個帳號，就可以經過可視化工具對圖片進行剪裁，獲取裁剪的圖片的座標。