[轉]如何爲圖片添加熱點連接？（map + area）

原文地址：https://www.cnblogs.com/jf-67/p/8135004.htmlhtml

所謂圖片熱點連接就是爲圖片指定一個或多個區域以實現點擊跳轉到指定的頁面。簡單來講就是點擊某一區域就能跳轉到相應的頁面，而無需點擊整個圖片才能跳轉。瀏覽器

　　說到圖片熱點連接，我首先想到了map + area，固然了，可能還有其餘方法也能實現。網站

　　之前只是知道有這個功能，可是具體如何實現卻沒有去真正的瞭解。因爲工做須要，今天稍微瞭解了下，發現這個功能其實蠻實用的，尤爲是在網頁banner廣告位中想實現點擊指定區域或連接以實現跳轉是很是有用的。ui

　　首先說下map，map的做用是定義一個圖像映射。所謂圖像映射，是指帶有可點擊區域的一幅圖像。spa

　　然而光有map是不夠的，還須要配合area標籤來使用，area元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域，也就是指定的點擊區域。code

　　說了這麼多，仍是直接上代碼吧：htm

<!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>

實現效果以下：blog

　　　　點擊圖中的連接實現跳轉連接對應的網站，因爲熱點連接點擊事後默認會有一個邊框，這裏咱們能夠給area元素設置樣式：outline:none便可實現點擊後無邊框圖片

　　ps:<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（取決於瀏覽器），因此咱們應同時向 <map> 添加 id 和 name 屬性。shape屬性規定了點擊區域的形狀。而coords 屬性則規定區域的 x 和 y 座標。這兩個屬性結合起來使用，來規定點擊區域的尺寸、形狀和位置。ci

　　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）