精確定位熱點區域

精確定位熱點區域

場景

當單擊一張圖片的不同區域，會顯示不同的鏈接內容，這就是圖片的熱點區域。所謂圖片的圖片熱點區域就是一個圖片划分成若干個鏈接區域。訪問者單擊不同的區域就會鏈接到不同的目標網頁。

實現原理

在HTML中，可以為圖片創建3中類型的熱點區域：矩形（Rectangle），圓形（Circle），多邊形（Poly）。創建熱點區域使用到的標記為<map>和<area>。

1. <img src="圖片地址" usemap="#test">
2. <map name="test">
3. <area shape="rect" coords="100,100,200,200" href="#">
4. <!--熱點區域為矩形，coords的設置值分別為矩形的左上角x，y坐標點和右下角x，y坐標點，單位為像素（px）-->
5. <area shape="circle" coords="70,70,30" href="http://www.baidu.com">
6. <!--熱點區域為圓形，coords的設置值分別為圓形圓心x，y坐標點和半徑值，單位為像素（px）-->
7. <area shape="poly" coords="631,529,616,506,625,482,644,469,652,476,662,480,667,484,658,505,647,514" href="#">
8. <!--熱點區域為多邊形，coords的設置值分別為多邊形各個點x，y坐標，單位為像素（px）-->
9. </map>

那么問題來了，熱點區域實現的關鍵是坐標點的確定，對於規則圖形還好辦些，但如果碰到多邊形呢？？？

解決方案總是多於需求的。因此，這里咱們不得不又提起Adobe Dreamweave CC這款利器。

具體操作看如下動圖，Y(^_^)Y

---

  ☢ 注意點

 熱點區域的坐標起點是以所在圖形的左上角為起點，即圖形的左上角坐標為（0,0）。

 由於Adobe Dreamweave CC的排版相對於以前版本變化不少，這里特地提醒，如果沒找到熱點區域工具，就將“實時視圖”切換為在“設計”，然后選中圖片鼠標左鍵雙擊，立馬就會彈出，如下圖的方框。

 

來自為知筆記(Wiz)