css圖片熱點連結的設定

標籤：第一個   rect   半徑   ref   class   src   href   idt   個數   

一、熱點的原理

圖片通過usemap="#Map"屬性將名稱為"Map"的作用區及串連映射到圖片上。

 

一般來說，圖片的usermap屬性對應的是map熱點的name的屬性值。所以如果頁面中如果有多個圖片添加熱點，那麼每一個圖片的usemap值跟對應的熱點地圖的name值一定要一樣，且不同的作用區name值不可以相同，如果相同，那麼圖片上的作用區將會以相同名稱的第一個作用區為準。

二、要設定圖片的熱點連結要用到三種標籤：<img><map><area>

1、shape：定義熱點形狀
 

shape=rect： 矩形
shape=circle：圓形
shape=poly： 多邊形

2、coords： 定義地區點的座標

a.矩形：必須使用四個數字，前兩個數字為左上方座標，後兩個數字為右下角座標
例：<area shape=rect coords=100,50,200,75 href="URL">

b.圓形：必須使用三個數字，前兩個數字為圓心的座標，最後一個數字為半徑長度
例：<area shape=circle coords=85,155,30 href="URL">

c.任意圖形（多邊形）：將圖形之每一轉折點座標依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

三、執行個體

<img src="../menu。gif" width="204" height="510" border="0" usemap="#Map" /><map name="Map" id="Map">    <area shape="rect" coords="12,37,181,88" href="URL1" onFocus="this.blur()"/>    <area shape="rect" coords="12,97,182,143" href="URL2" />    <area shape="rect" coords="18,155,179,200" href="URL3" />    <area shape="rect" coords="18,211,182,260" href="URL4" /></map>/*其中    onFocus="this.blur()"   表示去掉虛線框 */

 

css圖片熱點連結的設定