3-7 v

影像物件也是一個內建的物件,可以由兩種方式產生:
  1. 由網頁的影像標籤 <img> 所產生,並經由 id 屬性來取得影像物件。
  2. 由 new Image() 來產生新的影像物件,並可指定其對應影像網址,以達到快取(Cache)功能。
在以下的範例中,我們直接抓取網頁中的影像標籤,來列出其性質,範例如下:

Example(imageProp02.htm):

經由 for-in 迴圈的使用,上述範例的完整原始檔案相當簡短:

原始檔(imageProp02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<title>取自網頁影像標籤之 Image 物件的性質</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>取自網頁影像標籤之 Image 物件的性質</h2>
<hr>
<center><img id=myImage src="image/19980425/0041.jpg" height=200></center>
<script>
// 列舉影像物件的所有性質
for (prop in myImage)
	document.write("<br>myImage." + prop + " = " + myImage[prop]);
</script>

<hr>
</body>
</html>

在上述範例中,可以看出,比較常用的性質如下:

此外,在上述範例中,你會看到影像圖檔會呈現兩次,那是因為 myImage.outerHTML 就是顯示此影像的標籤,所以你會看到此影像。一般而言,對於一個由 HTML 的標籤所形成的物件 obj 而言,obj.outerHTML 是包含前後標籤的 HTML 原始文字,而 obj.innerHTML 則是不包含前後標籤的 HTML 原始文字。例如,如果我們使用 obj 代表下列物件: <a target=_blank href="myHome.htm">linked text</a> 在下列範例中,我們先產生一個影像物件,再指定其網址,最後將此影像物件的所有性質印出來,範例如下:

Example(imageProp01.htm):

得到的結果和前一個範例非常類似,上述範例的完整原始檔案如下:

原始檔(imageProp01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<title>Image 物件的性質</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>Image 物件的性質</h2>
<hr>

<script>
myImage = new Image();
myImage.src = "image/19980425/0001.jpg";
// 列舉影像物件的所有性質
for (prop in myImage)
	document.write("<br>myImage." + prop + " = " + myImage[prop]);
</script>

<hr>
</body>
</html>

(在嘗試上述範例時,請先確認 myImage.src 是指到一個有效的影像檔案路徑。) 特別要說明的是,一旦指定網址,影像物件就會把各種相關資訊從網址抓回來,因此若可以事先指定多個影像物件的網址,就可以達到快取的功能。有關快取的說明與範例,請見下一章有關於陣列物件的說明。)

Hint
據筆者所知,JavaScript 目前並沒有相關的 audio 物件,可以達到快取的功能。若有讀者知道如何對 audio 物件進行快取,麻煩來信告知,謝謝。

在本節的範例中,都是指定相對路徑,但你也可以指定絕對路徑,可得到類似的結果。


JavaScript 程式設計與應用:用於網頁用戶端