HTML 標簽-創建帶有可點擊區域的圖像映射


定義和用法

定義一個客戶端圖像映射。圖像映射(image-map)指帶有可點擊區域的一幅圖像。

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

 

注釋:area 元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域。

<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性(取決於瀏覽器),所以我們應同時向 <map> 添加 id 和 name 屬性。

實例

帶有可點擊區域的圖像映射:

<html>
<body>

<p>請點擊圖像上的星球,把它們放大。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注釋:</b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id""name" 屬性(根據瀏覽器),所以我們同時向 map 元素添加了 "id""name" 屬性。</p>

</body>
</html>

效果如下(可自行點擊查看效果):

 

附:<area> 標簽的 coords 屬性

定義和用法

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" 是圖像左上角的坐標。請注意,定義矩形實際上是定義帶有四個頂點的多邊形的一種簡化方法。

例如,下面的 XHTML 片段在一個 100x100 像素圖像的右下方四分之一處,定義了一個對鼠標敏感的區域,並在圖像的正中間定義了一個圓形區域。

<map name="map">
  <area shape="rect" coords="75,75,99,99" nohref="nohref">
  <area shape="circ" coords="50,50,25" nohref="nohref">
</map>

提示和注釋

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


免責聲明!

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



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