例
圖像映射,可點擊方面:
<img src="planets.gif"
width="145" height="126"
alt="Planets"
usemap="#planetmap">
<map
name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
試一試» 定義和用法
在<area>標籤定義圖像映射(圖像映射是帶有可點擊區域的圖像)內的區域。
在<area>元素始終嵌套在裡面<map>標記。
注意: usemap在屬性<img>標記與相關聯的<map>元素的name屬性,並創建圖像和地圖之間的關係。
瀏覽器支持
元件 | |||||
---|---|---|---|---|---|
<area> | 是 | 是 | 是 | 是 | 是 |
HTML 4.01和HTML5之間的差異
HTML5有一些新的屬性,以及一些HTML 4.01屬性都不再支持。
HTML和XHTML之間的差異
在HTML中的<area>標籤沒有結束標籤。
在XHTML中的<area>標籤必須正確關閉。
屬性
=新的HTML5。
屬性 | 值 | 描述 |
---|---|---|
alt | text | 指定區域的替代文本。 如果需要的href屬性存在 |
coords | coordinates | 指定區域的坐標 |
download | filename | 指定當用戶點擊超鏈接的目標將被下載 |
href | URL | 指定的超鏈接目標區域 |
hreflang | language_code | 指定目標URL的語言 |
media | media query | 指定的介質/設備的目標URL被優化 |
nohref | value | 在HTML5不支持。 指定一個區域沒有相關鏈接 |
rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | 指定當前文件和目標URL之間的關係 |
shape |
default rect circle poly | 指定的區域的形狀 |
target | _blank _parent _self _top framename | 規定在何處打開目標URL |
type | media_type | 指定目標URL的媒體類型 |
全局屬性
在<area>標籤支持全局的HTML屬性 。
事件屬性
在<area>標籤支持的HTML事件屬性 。
相關頁面
HTML DOM參考: Area對象
默認設置CSS
大多數瀏覽器會顯示<area>元素與以下默認值:
area {
display:
none;
}