我們經(jīng)常會給一張圖片綁定一個超鏈接，以供用戶欣賞大圖或者跳轉(zhuǎn)頁面。HTML有個圖像映射的功能，可以在一張圖片的不同區(qū)域綁定鏈接，讓用戶可以有更新奇的體驗(yàn)。
-
開啟圖像映射
給<img>標(biāo)簽設(shè)置usemap屬性從而開啟一張圖片的映射功能。
<img src = "image1.jpg" alt = "圖片1" usemap = "#umap" />
這里的usemap的屬性值為<map>標(biāo)簽的id值，下文會提到。
-
設(shè)置映射區(qū)域
圖片開啟了映射后，應(yīng)該給圖片定義若干個映射區(qū)域。我們用<map>標(biāo)簽來包裹這些映射區(qū)域。<map>標(biāo)簽的id值必須和圖片的usemap屬性值對應(yīng)。
<map name = "umap" id = "umap">
<area shape = "rect" coords = "20,20,100,100" href = "image2.jpg" alt = "圖片2" />
<area shape = "circle" coords = "200,200,10" href = "image3.jpg" alt = "圖片3" />
<area shape = "poly" coords = "0,0,110,260" href = "index.html" alt = "主頁" />
</map>
<area>標(biāo)簽必須嵌套在<map>內(nèi)部，用來定義映射區(qū)域。
其中：
-
shape屬性定義映射區(qū)域的形狀 rect為矩形
circle為圓形
poly為多邊形
-
coords定義了形狀的坐標(biāo)與半徑
<map name = "umap" id = "umap">
<area shape = "rect" coords = "x1,y1,x2,y2" />
//x1,y1,x2,y2為矩形的左上角和右下角坐標(biāo)。
<area shape = "circle" coords = "x1,y1,r" />
//x1,y1,r為圓心的坐標(biāo)和半徑。
<area shape = "poly" coords = "x1,y1,x2,y2,.....,xn,yn" />
//x1,y1,x2,y2,..,xn,yn為多邊形的n個坐標(biāo)點(diǎn)，最后一個點(diǎn)的坐標(biāo)應(yīng)該與第一個相同，若不同瀏覽器會自動補(bǔ)全。
</map>
坐標(biāo)和半徑都是相對于像素而言，左上角為像素的 0,0 點(diǎn)，你可以用圖片編輯工具來確定任一點(diǎn)的像素坐標(biāo)。
-
href映射到圖片或者頁面
你可以把你的映射區(qū)域映射到不同的頁面或者圖片。
href = "index.html"
href = "image.jpg"
另外<area>標(biāo)簽也可以設(shè)置target屬性，用來設(shè)置在新窗口或者本窗口打開新頁面。
target = "_blank"
target = "_self"
-
一個例子
<html>
<head>
</head>
<body>
<img src = "http://upload-images.jianshu.io/upload_images/5099997-d59bd279ff414757.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" usemap = "#umap" alt = "貓和狗" />
<map id = "umap" name = "umap">
<area shape = "rect" coords = "220,180,420,400" alt = "狗" target = "_blank" />
<area shape = "circle" coords = "685,340,130" alt = "貓" target = "_blank" />
</map>
</body>
</html>
貓和狗
點(diǎn)擊不同的區(qū)域，會跳到不同的頁面。
狗
貓
-
更多關(guān)于圖像映射
你也可以在你的圖像映射上添加各種事件，更多內(nèi)容請參考：
W3C
作者：jingks
此為原創(chuàng)文章，請勿用在商業(yè)用途，轉(zhuǎn)載請標(biāo)明作者。
