DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> css圖片熱點鏈接的設置
css圖片熱點鏈接的設置
編輯:CSS特效代碼     

一、熱點的原理

圖片通過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()"   表示去掉虛線框 */

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved