HTML 5 <area> 標簽

定義和用法

<area> 標簽定义图像映射中的区域。

HTML 4.01 与 HTML 5 之间的差异

HTML 5 有一些新的屬性,且不再支持 HTML 4.01 的一些屬性。

例子:

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />

<map id ="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>

屬性

屬性 描述 4 5
alt

定义此区域的替换文本。如果 href 存在,则该屬性是必需的。

仅在 href 屬性存在时使用。

4 5
coords 定義可點擊區域的坐標。 4 5
href 定义此区域的目标 URL。 4 5
hreflang 规定目标 URL 的基准语言。仅在 href 屬性存在时使用。 4 5
nohref 不贊成。從圖像映射排除一個區域。 4  
media 规定目标 URL 的媒介类型。默认值:all。仅在 href 屬性存在时使用。   5
ping

由空格分隔的 URL 列表,当用户点击该链接时,这些 URL 会获得通知。

仅在 href 屬性存在时使用。

  5
rel 规定当前文档与目标 URL 之间的关系。仅在 href 屬性存在时使用。   5
shape 規定區域的形狀。 4 5
target 在何处打开目标 URL。 4 5
type 规定目标 URL 的 MIME 类型。仅在 href 屬性存在时使用。   5

标准屬性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, 
lang, ref, registrationmark, tabindex, template, title

如需完整的描述,請訪 HTML 5 中标准屬性

事件屬性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, 
ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, 
ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, 
onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, 
onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

如需完整的描述,請訪 HTML 5 中事件屬性

TIY

創建圖像映射
本例顯示如何創建帶有可供點擊區域的圖像映射。其中的每個區域都是一個超級鏈接。