HTML DOM教程 16-HTML DOM Area 對象

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');
document.write(x.host);

</script>

</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');
document.write(x.search);

</script>

</p>

</body>

</html>