area
适用DTD:Strict Transitional Frameset 适用浏览器:All
释义
图像映射区域(image map area)
语法
<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)开始,越向右下角越大。这些坐标都以像素为单位度量。
|
⑤ target | 目标框架名 | 指定超链接打开的框架窗口的名称。框架名在定义框架结构时已定义好。或者也可以使用如下四个具有特定含义的框架名:
|
⑥ 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>
<area href="link1.html" alt="access guide" shape="rect" coords="coordinates">
<area href="link2.html" alt="search" shape="rect" coords="coordinates">
...
</map>
范例
下面的例子显示了XHTML文件基础结构: 运行打印
下面的例子显示了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>
<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>