网络学院 w3pop社区 网络资源 IT新闻

w3pop.com :: 网络学院 :: HTML :: HTML <area>标签

会员登陆

帐号

密码

回答

记住密码

忘记密码? 注册

HTML <area>标签

作者:w3pop.com 翻译/整理:w3pop.com 发布:2007-04-28 浏览:5588 :: ::

Definition and Usage
用法

Defines a region in an image map.
定义图片的热点区

Differences Between HTML and XHTML
它在HTML与XHTML中的区别

In HTML the <area> tag has no end tag.
在HTML中<area>标签可以不加上关闭标签

In XHTML the <area> tag must be properly closed.
在XHTML中<area>标签必须合理关闭

Tips and Notes
注意点

This element is always nested inside a <map> tag.
这个元素应该嵌于<map>标签内

Note: The usemap attribute in <image> refers to the id or name (browser dependant) attribute in <map>, therefore we have added both the id and name attributes to <map>.
注意：在<image>里的usemap属性与<map>中的id或name属性有指示性，所以必须在<map>的属性里同时加入id和name。

Example
案例

源代码 输出结果
<p>Click on one of the planets:</p>

<img src ="planets.gif"
width="145" height="126"
alt="Planets"
usemap ="#planetmap" />

<map id ="planetmap"
name="planetmap">
  <area shape ="rect" coords ="0,0,82,126"
  href ="sun.htm" target ="_blank"
  alt="Sun" />
  <area shape ="circle" coords ="90,58,3"
  href ="mercur.htm" target ="_blank"
  alt="Mercury" />
  <area shape ="circle" coords ="124,58,8"
  href ="venus.htm" target ="_blank"
  alt="Venus" />
</map>

Click on one of the planets:
请点击其中一张行星图片：

Planets Sun Mercury Venus

Required Attributes
必要属性

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
下表中的DTD列指明了被支持的DTD属性。S=Strict（精确的），T=Transitional（传统的），F=Frameset（框架）

属性 值 描述 DTD
alt text Specifies an alternate text for the area
为area提供替换文字		 STF

Optional Attributes
可选属性

属性 值 描述 DTD
coords

if shape="rect" then
coords="left,top,right,bottom"

if shape="circ" then
coords="centerx,centery,radius"

if shape="poly" then
coords="x1,y1,x2,y2,..,xn,yn"

 Specifies the coordinates for the clickable area
为可点击区域指定坐标范围		 STF
href URL Specifies the target URL of the area
指定区域的目标URL		 STF
nohref true
false		 Excludes an area from the image map
从图片热点区中排除		 STF
shape rect
rectangle
circ
circle
poly
polygon		 Defines the shape of the area
定义区域形状		 STF
target _blank
_parent
_self
_top

Where to open the target URL.
如何打开连接

  • _blank - the target URL will open in a new window
    在新窗口
  • _self - the target URL will open in the same frame as it was clicked
    在自身窗口或是自身框架
  • _parent - the target URL will open in the parent frameset
    在父级框架集中打开
  • _top - the target URL will open in the full body of the window
    在窗口主体部分打开
TF

Standard Attributes
标准属性

id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

For a full description, go to Standard Attributes.
查看完整描述

Event Attributes
事件属性

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur

For a full description, go to Event Attributes.
查看完整描述

Try-It-Yourself Demos
演示

Create an image map
How to create an image map, with clickable regions. Each region is a hyperlink.
为图片建立热点区，并为它们加上超级连接。

评论 (0) All