area
适用DTD：Strict Transitional Frameset   适用浏览器：All
释义
图像映射区域（image map area）

语法
<area 属性="属性值">

说明
area为map元素的子元素，其作用是具体定义客户端图像映射区域的链接指向、替换文本、形状和坐标
单击area对象的一个映射区域通常会将用户引导到另外一个文档或定位到同一文档中的另一个锚点，因此，文档对象模型将图像映射area对象处理为文档中的一个超链接
area在HTML中为空元素，没有结束标签

属性
属性 属性值 说明
① href URI 指定链接指向的URI
② nohref 空值|nohref 此布尔属性指定当前映射区域没有超链接
③ shape 预定义值 该属性用来定义客户端图像映射的一个区域，其值为预定义的关键字：default、rect、circle、poly。默认值是default，表示适合整张图片的形状；rect(有的浏览器可识别非标准的关键字rectangle)表示矩形，circle(有的浏览器可识别非标准的关键字circ) 表示圆形，poly(有的浏览器可识别非标准的关键字polygon)表示多边形
④ coords 坐标值 根据shape属性定义的图像映射形状，coord属性可以定义相应的坐标值（可点击区域在整个图像中的坐标），以便浏览器能够根据这些坐标在图像范围内产生相应的形状，然后可以利用href属性设置可点击区域的超链接目标。这样，在不切割图片的情况下，把一个分为若干区域，用户点击不同的区域（这样的区域称为热点）就可以打开不同的超链接。图像图像映射的坐标从左上角（0,0）开始，越向右下角越大。这些坐标都以像素为单位度量。
  • 如果shape属性值为rect（矩形），则按照矩形的左上角“x1,y1”像素值和右下角“x2,y2”像素值顺序定义坐标，所以其格式为coords="x1,y1,x2,y2"，各值以逗号隔开
  • 如果shape属性值为circle（圆形），则按照圆心x坐标、圆心y坐标和圆形半径r（像素值）的顺序定义坐标，即coords="x,y,r"
  • 当shape属性值为poly（多边形），任何一点都可做多边形的起始点，姑且表示为“x0,y0”，则相邻点为“x1,y1”、“x2,y2”、“x3,y3”……顺时针方向或者逆时针方向都不会有影响，即表示为coords="x1,y1,x2,y2,x3,y3…"。因为多边形最少要有三个边（三角形也数多边形），所以至少要有3个点（3对x,y坐标值），复杂的多边形需要很多坐标值。如果多边形的第一个和最后一个坐标不相同，则浏览器会自动把第一个点的坐标和最后一个点的坐标相连，从而形成一个完整的闭合多边形。
由此可见，只要每一段边足够短，指定的顶点足够多，就可以模拟出复杂的形状。注：如果定义的几何形区域有重叠，那么先列出的区域优先
⑤ target 目标框架名 指定超链接打开的框架窗口的名称。框架名在定义框架结构时已定义好。或者也可以使用如下四个具有特定含义的框架名：
  • _self表示在当前框架窗口中载入文档；
  • _blank表示在新开的窗口中打开链接；
  • _parent表示在当前框架的父框架中打开连接；
  • _top表示在顶层窗口中打开链接（忽略任何框架）
⑥ alt 任意字符串 指定图片无法显示时用来替换显示的文字
⑦ tabindex 0~32767的整数 按下Tab键时控件获得焦点（键盘遍历）的顺序，从属性值最小者开始移动
⑧ accesskey 任一文字字符 指定快捷访问键，Windows下为Alt键加上快捷访问键，Macintosh下为Command键加上此快捷访问键
⑨ 通用属性：id、class、title、style、dir、lang、xml:lang 查看
nbsp;

示范
<map name="map1">
<area href="link1.html" alt="access guide" shape="rect" coords="coordinates">
<area href="link2.html" alt="search" shape="rect" coords="coordinates">
...
</map>

范例
下面的例子显示了XHTML文件基础结构： 运行打印
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>元素map、area</title>
</head>
<body>
<h2>客户端图像映射演示</h2>
<p align="center"> <img src="src/map.gif" width="504" height="363" border="0" usemap="#Map" alt="世界地图">
<map name="Map">
<area shape="rect" coords="394,229,473,297" href="#australia" alt="大洋洲">
<area shape="circle" coords="267,214,67" href="#africa" alt="非洲">
<area shape="poly" coords="138,191,153,199,165,205,178,214,189,219,190,229,185,245,174,253,171,265,162,277,152,288,146,301,149,314,137,312,131,299,137,278,141,250,138,240,127,231,122,219,130,202,128,196,137,191" href="#s_american" alt="南美洲">
</map>
</p>
<p align="center">
[<a href="#asia">亚洲</a>]
[<a href="#n_american">北美洲</a>]
[<a href="#s_american">南美洲</a>]
[<a href="#europe">欧洲</a>]
[<a href="#australia">大洋洲</a>]
[<a href="#africa">非洲</a>]
</p>
<h2 align="left"><a name="asia">亚洲</a></h2>
<p align="left">亚洲是亚细亚洲的简称，位于东半球的东北部。东临太平洋，南濒印度洋，北达北冰洋。面积4400万平方公里，占全球陆地总面积的29.4%，是世界上最大的洲。</p>
<h2 align="left"><a name="n_american">北美洲</a></h2>
<p align="left">北美洲是北亚美洲加洲的简称，位于西半球北部，东面是大西洋，西面是太平洋，北面是北冰洋，南端以巴拿马运河为界与南美洲相分。</p>
<h2 align="left"><a name="s_american">南美洲</a></h2>
<p align="left">南美洲是南亚美利加洲的简称，位于西半球西部，东面是大西洋，陆地以巴拿马运河为界与北美洲相分，南面隔海与南极洲相望。</p>
<h2 align="left"><a name="europe">欧洲</a></h2>
<p align="left">欧洲是欧罗巴洲的简称，位于东半球的西北部。北临北冰洋，西濒大两洋，南隔地中海与非洲相望，东部与亚洲大陆毗连。</p>
<h2 align="left"><a name="australia">大洋洲</a></h2>
<p align="left">大洋洲位于太平洋西南部和南部、赤道南北的广大海域，总面积约897万平方公里，人口2900万是世界上面积最小、人口最少的一个洲。</p>
<h2 align="left"><a name="africa">非洲</a></h2>
<p align="left">非洲全称阿非利加洲，位于东半球的东南部，赤道横穿大陆。西北部有部分地区以及岛屿伸入西半球，是仅次于亚洲的第二大洲。</p>
</body>
</html>

参阅
map
a