HTML DOM教程 16-HTML DOM Area 对象
1:Area 对象
Area 对象代表图像映射的一个区域（图像映射指的是带有可点击区域的图像）
在 HTML 文档中 <area> 标签每出现一次，就会创建一个 Area 对象。
2:Area 对象的属性
| 属性 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| accessKey | 设置或返回访问某个区域的快捷键。 | 5 | 1 | No | Yes |
| alt | 设置或返回当浏览器无法显示某个区域时的替换文字。 | 5 | 1 | 9 | Yes |
| coords | 设置或返回图像映射中可点击区域的坐标。 | 5 | 1 | 9 | Yes |
| hash | 设置或返回某个区域中 URL 的锚部分。 | 4 | 1 | No | No |
| host | 设置或返回某个区域中 URL 的主机名和端口。 | 4 | 1 | No | No |
| href | 设置或返回图像映射中链接的 URL。 | 4 | 1 | 9 | Yes |
| id | 设置或返回某个区域的 id。 | 4 | 1 | 9 | Yes |
| noHref | 设置或返回某个区域是否应是活动的还是非活动的。 | 5 | 1 | 9 | Yes |
| pathname | 设置或返回某个区域中的 URL 的路径名。 | 4 | 1 | 9 | No |
| protocol | 设置或返回某个区域中的 URL 的协议。 | 4 | 1 | 9 | No |
| search | 设置或返回某个区域中 URL 的查询字符串部分。 | 4 | 1 | 9 | No |
| shape | 设置或返回图像映射中某个区域的形状。 | 5 | 1 | 9 | Yes |
| tabIndex | 设置或返回某个区域的 tab 键控制次序。 | 5 | 1 | 9 | Yes |
| target | 设置或返回在何处打开区域中的 link-URL。 | 4 | 1 | 9 | Yes |
3:标准属性
| 属性 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| className | 设置或返回元素的 class 属性。 | 5 | 1 | 9 | Yes |
| dir | 设置或返回文本的方向。 | 5 | 1 | 9 | Yes |
| lang | 设置或返回元素的语言代码。 | 5 | 1 | 9 | Yes |
| title | 设置或返回元素的 title。 | 5 | 1 | 9 | Yes |
4:dir属性
定义：dir 属性设置或返回元素的文字方向。
用法：如下例所示：
<html>
<body id="myid" dir="rtl">
<script type="text/javascript">
x=document.getElementsByTagName('body')[0];
document.write("Text direction: " +
x.dir);document.write("<br />");
document.write("An alternate way: ");
document.write(
document.getElementById('myid').dir);</script>
</body>
</html>
5:hash 属性
定义：hash 属性可设置或返回一个区域中 URL 的锚部分。
用法： 见下例，下面的例子可把 URL 的锚部分 #top 更改为 #bottom：
<html>
<head>
<script type="text/javascript">
function changeLink()
{
document.getElementById('venus').hash="bottom"}
</script>
</head>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap" />
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus2.htm#top" />
</map>
<input type="button" onclick="changeLink()" value="Change link" />
</body>
</html>
6:host 属性
见下例，下面的例子可返回 "Venus" 区域的主机名和端口：
<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap" />
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
<p>The hostname and port for the "Venus" area are:
<script type="text/javascript">
x=document.getElementById('venus');</script>
document.write(x.host);
</p>
</body>
</html>
7:search 属性
<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap" />
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm?id=venus" />
</map>
<p>The hostname and port for the "Venus" area are:
<script type="text/javascript">
x=document.getElementById('venus');</script>
document.write(x.search);
</p>
</body>
</html>