简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  HTML 標籤－建立具有可點擊區域的影像映射

HTML 標籤－建立具有可點擊區域的影像映射

WBOY
WBOY原創
2016-08-31 08:41:481861瀏覽

定義和用法

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

所有主流瀏覽器都支援 標籤。

 

註解：area 元素永遠嵌套在 map 元素內部。 area 元素可定義影像映射中的區域。

HTML <map> 標籤－建立具有可點擊區域的影像映射中的 usemap 屬性可引用 中的 id 或 name 屬性（取決於瀏覽器），所以我們應同時向 新增 id 和 name 屬性。

實例

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

<html>
<body>

<p>请点击图像上的星球，把它们放大。</p>

<<span style="color: #000000;">img
src</span>=<span style="color: #800000;">"</span><span style="color: #800000;">/i/eg_planets.jpg</span><span style="color: #800000;">"</span><span style="color: #000000;">
border</span>=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> usemap=<span style="color: #800000;">"</span><span style="color: #800000;">#planetmap</span><span style="color: #800000;">"</span><span style="color: #000000;">
alt</span>=<span style="color: #800000;">"</span><span style="color: #800000;">Planets</span><span style="color: #800000;">"</span> />

<map name=<span style="color: #800000;">"</span><span style="color: #800000;">planetmap</span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">planetmap</span><span style="color: #800000;">"</span>>

<<span style="color: #000000;">area
shape</span>=<span style="color: #800000;">"</span><span style="color: #800000;">circle</span><span style="color: #800000;">"</span><span style="color: #000000;">
coords</span>=<span style="color: #800000;">"</span><span style="color: #800000;">180,139,14</span><span style="color: #800000;">"</span><span style="color: #000000;">
href </span>=<span style="color: #800000;">"</span><span style="color: #800000;">/example/html/venus.html</span><span style="color: #800000;">"</span><span style="color: #000000;">
target </span>=<span style="color: #800000;">"</span><span style="color: #800000;">_blank</span><span style="color: #800000;">"</span><span style="color: #000000;">
alt</span>=<span style="color: #800000;">"</span><span style="color: #800000;">Venus</span><span style="color: #800000;">"</span> />

<<span style="color: #000000;">area
shape</span>=<span style="color: #800000;">"</span><span style="color: #800000;">circle</span><span style="color: #800000;">"</span><span style="color: #000000;">
coords</span>=<span style="color: #800000;">"</span><span style="color: #800000;">129,161,10</span><span style="color: #800000;">"</span><span style="color: #000000;">
href </span>=<span style="color: #800000;">"</span><span style="color: #800000;">/example/html/mercur.html</span><span style="color: #800000;">"</span><span style="color: #000000;">
target </span>=<span style="color: #800000;">"</span><span style="color: #800000;">_blank</span><span style="color: #800000;">"</span><span style="color: #000000;">
alt</span>=<span style="color: #800000;">"</span><span style="color: #800000;">Mercury</span><span style="color: #800000;">"</span> />

<<span style="color: #000000;">area
shape</span>=<span style="color: #800000;">"</span><span style="color: #800000;">rect</span><span style="color: #800000;">"</span><span style="color: #000000;">
coords</span>=<span style="color: #800000;">"</span><span style="color: #800000;">0,0,110,260</span><span style="color: #800000;">"</span><span style="color: #000000;">
href </span>=<span style="color: #800000;">"</span><span style="color: #800000;">/example/html/sun.html</span><span style="color: #800000;">"</span><span style="color: #000000;">
target </span>=<span style="color: #800000;">"</span><span style="color: #800000;">_blank</span><span style="color: #800000;">"</span><span style="color: #000000;">
alt</span>=<span style="color: #800000;">"</span><span style="color: #800000;">Sun</span><span style="color: #800000;">"</span> />

</map>

<p><b>注释：</b>img 元素中的 <span style="color: #800000;">"</span><span style="color: #800000;">usemap</span><span style="color: #800000;">"</span> 属性引用 map 元素中的 <span style="color: #800000;">"</span><span style="color: #800000;">id</span><span style="color: #800000;">"</span> 或 <span style="color: #800000;">"</span><span style="color: #800000;">name</span><span style="color: #800000;">"</span> 属性（根据浏览器），所以我们同时向 map 元素添加了 <span style="color: #800000;">"</span><span style="color: #800000;">id</span><span style="color: #800000;">"</span> 和 <span style="color: #800000;">"</span><span style="color: #800000;">name</span><span style="color: #800000;">"</span> 属性。</p>

</body>
</html>

效果如下（可自行點選查看效果）：

 

附： 標籤的 coords 屬性

定義和用法

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

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

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

詳細解釋：

標籤的 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 標籤。瀏覽器會忽略超過圖像邊界範圍之外的座標。

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：刪除div下一篇：刪除div

相關文章

看更多