img 標簽的 usemap 屬性




<img src="1.gif" alt="Planets" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="11,10,180,180" href="detail/Best_marketing.html">
<area shape="rect" coords="198,13,364,175" href="detail/General_manager.html">
</map>
上面這段源代碼將一幅圖像 1gif 映射為 3 個區域,當用戶單擊其中某一個區域時,將被鏈接到不同的文檔中。

 usemap 屬性將圖像定義為客戶端圖像映射。

 圖像映射指的是帶有可點擊區域的圖像。

 usemap 屬性與 <map> 元素的 name 或 id 屬性相關聯,以建立 <img> 與 <map> 之間的關系。

ismap 屬性和 usemap 屬性的應用差異

地圖就是很好地應用 ismap 和 usemap 屬性的一個示例,例如,在瀏覽一家全國范圍的大公司網頁時,用戶可能會在地圖上單擊他們所居住的城市,以獲得附近地區零售店的地址和電話號碼等。

usemap 客戶端處理圖像映射的好處是,它不要求有服務器或特殊的服務器軟件,與 ismap 機制不同,它可以用在非 web (無網絡)環境中,例如在本地的文件或者 CD-ROM 中使用。

 

/*

所有主流瀏覽器都支持 <area> 標簽。

*/

<area> 標簽定義圖像映射中的區域(注:圖像映射指得是帶有可點擊區域的圖像)。

area 元素總是嵌套在 <map> 標簽中。

注釋:<img> 標簽中的 usemap 屬性與 map 元素 name 屬性相關聯,創建圖像與映射之間的聯系。

   <img> 中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性(由瀏覽器決定),所以我們需要同時向 <map> 添加 id 和 name 兩個屬性。

coords 屬性規定區域的 x 和 y 坐標。

coords 屬性與 shape 屬性配合使用,來規定區域的尺寸、形狀和位置。

圖像左上角的坐標是 "0,0"。

<area> 標簽的 coords 屬性定義了客戶端圖像映射中對鼠標敏感的區域的坐標。坐標的數字及其含義取決於 shape 屬性中決定的區域形狀。可以將客戶端圖像映射中的超鏈接區域定義為矩形、圓形或多邊形等。

下面列出了每種形狀的適當值:

圓形:shape="circle",coords="x,y,z"

這里的 x 和 y 定義了圓心的位置("0,0" 是圖像左上角的坐標),r 是以像素為單位的圓形半徑。

多邊形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."

每一對 "x,y" 坐標都定義了多邊形的一個頂點("0,0" 是圖像左上角的坐標)。定義三角形至少需要三組坐標;高緯多邊形則需要更多數量的頂點。

多邊形會自動封閉,因此在列表的結尾不需要重復第一個坐標來閉合整個區域。

矩形:shape="rectangle",coords="x1,y1,x2,y2"

第一個坐標是矩形的一個角的頂點坐標,另一對坐標是對角的頂點坐標,"0,0" 是圖像左上角的坐標。請注意,定義矩形實際上是定義帶有四個頂點的多邊形的一種簡化方法。

 (如果某個 area 標簽中的坐標和其他區域發生了重疊,會優先采用最先出現的 area 標簽。瀏覽器會忽略超過圖像邊界范圍之外的坐標。)

 

找到一個簡單易懂的鏈接 特此發表  http://jingyan.baidu.com/article/a948d6510eadf00a2ccd2e77.html
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM