所謂圖片熱點鏈接就是為圖片指定一個或多個區域以實現點擊跳轉到指定的頁面。簡單來說就是點擊某一區域就能跳轉到相應的頁面，而無需點擊整個圖片才能跳轉。
說到圖片熱點鏈接，我首先想到了map + area，當然了，可能還有其他方法也能實現。
以前只是知道有這個功能，但是具體如何實現卻沒有去真正的了解。由於工作需要，今天稍微了解了下，發現這個功能其實蠻實用的，尤其是在網頁banner廣告位中想實現點擊指定區域或鏈接以實現跳轉是非常有用的。
首先說下map，map的作用是定義一個圖像映射。所謂圖像映射，是指帶有可點擊區域的一幅圖像。
然而光有map是不夠的，還需要配合area標簽來使用，area元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域，也就是指定的點擊區域。
說了這么多，還是直接上代碼吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:1024px;
margin:10px auto;
}
img{
width:1024px;
height:200px;
}
#mapArea{
outline:none;
}
</style>
</head>
<body>
<div class="box">
<img src="adver_xmb.png" alt="" usemap="#planetmap">
<map name="planetmap" id="planetmap">
<area shape="rect" coords="248,45,403,65" href ="http://xmeibao.com" target ="_blank" alt="Venus" id="mapArea" />
</map>
</div>
</body>
</html>
實現效果如下：
點擊圖中的鏈接實現跳轉鏈接對應的網站，由於熱點鏈接點擊過后默認會有一個邊框，這里我們可以給area元素設置樣式：outline:none即可實現點擊后無邊框
ps:<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（取決於瀏覽器），所以我們應同時向 <map> 添加 id 和 name 屬性。shape屬性規定了點擊區域的形狀。而coords 屬性則規定區域的 x 和 y 坐標。這兩個屬性結合起來使用，來規定點擊區域的尺寸、形狀和位置。
shape可取值：circle(圓形)、polygon(多邊形)、rect(矩形)
shape取值rect，則coords對應的值為x1,y1,x2,y2。第一個坐標表示矩形左上角的坐標，第二個坐標表示矩形右下角的坐標。
shape取值circle，則coords對應的值為x,y,r。其中x，y表示圓心的坐標，r則是圓的半徑。
至於多邊形我沒使用過，多邊形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一對 "x,y" 坐標都定義了多邊形的一個頂點（"0,0" 是圖像左上角的坐標）。定義三角形至少需要三組坐標；高緯多邊形則需要更多數量的頂點。多邊形會自動封閉，因此在列表的結尾不需要重復第一個坐標來閉合整個區域。（由於多邊形沒使用過，此處引用的w3school）