JavaScript

   


圖片 (Image)


圖片

圖片物件是指 HTML 檔內的 <img> 標記, 它是版本 1.1 新增的物件, 因此 NN 2 和 IE 3 都不支援。 我們可以控制 <img> 標記堛瘧搣吽A 從而做出互動圖片的效果, 例如圖片變化按鈕、 圖片放映機 (Slide Show) 等。 和 Date 物件一樣, 我們要用 new 來產生它。

語法: 產生圖片物件

new Image(width , height)

說明:

  • widthheight 分別是圖片的闊度和高度, 它們都是選擇性的。

下表列出圖片物件的屬性:

屬性 說明
border <img> 標記的 border 屬性
complete 圖片是否己經完全載入
height <img> 標記的 height 屬性
hspace <img> 標記的 hspace 屬性
lowsrc <img> 標記的 lowsrc 屬性
name <img> 標記的 name 屬性
src <img> 標記的 src 屬性
vspace <img> 標記的 vspace 屬性
width <img> 標記的 width 屬性

我們只可以修改 src 和 lowsrc 的內容, 其它則不能修改。

圖片物件是用 images 陣列來表示的。 下表列出了表示圖片物件的方法:

表示方法 HTML   圖片物件表示方法
第一種 <body>
<img src="button0.gif">
<img src="button1.gif">
</body>
第一幅 document.images[0]
第二幅 document.images[1]
第二種 <body>
<img name="button0" src="button0.gif">
<img name="button1" src="button1.gif">
</body>
第一幅 document.images["button0"]
第二幅 document.images["button1"]

由於 images 陣列可以用來表示一頁內的所有圖片, 所以如果用第一種表示方法時, 要特別留意你想表示的圖片是在 images 陣列中的哪個位置。 在上表的 HTML 中, 可以看到 <body> 範圍內只有 2 幅圖片, 而且第一幅是 button0.gif , 第二幅是 button1.gif, 因此用第一種寫法也很少會令自己混淆。

預載圖片

預載圖片即是把要用的圖片下載到瀏覽器的快取記憶位置 (Cache) , 不用等到要顯示該圖片時才下載。

例子: 預載三幅圖片 button.gif , button_over, button_out.gif

<html>
<head>
<script>
button = new Image()
button.src = "button.gif"
button_over = new Image()
button_over.src = "button_over.gif"
button_out = new Image()
button_out.src = "button_out.gif"
</script>
</head>

例子說明:

  • 預載圖片的 JavaScript 應該寫在 <head> 範圍, 這樣就可盡早載入圖片。

圖片變化

透過修改圖片物件的 src 屬性, 就可把一幅圖片變成另一幅圖片。

例子: 圖片變化按鈕

<html>
<head>
<script>
button = new Image()
button.src = "button.gif"
button_over = new Image()
button_over.src = "button_over.gif"
button_out = new Image()
button_out.src = "button_out.gif"
</script>
</head>
<body>
<a href="index.html"
onMouseOver="document.images['hover'].src=button_over.src"
onMouseOut="document.images['hover'].src=button_out.src">
<img name="hover" src="button.gif">
</a>
</body>
</html>

執行結果:

例子說明:

  • 由於圖片物件不支援 onMouseOut 和 onMouseOver 等事件處理者, 所以就利用 anchor 物件的事件處理者了。

 

圖片放映機

每隔一段時間就變更某一幅圖片, 也可以用來做到類似動畫 GIF (Animated GIF) 的效果。

例子: 圖片方映機

<html>
<head>
<script>
var slide = new Array("button.gif" , "button_over.gif" , "button_out.gif")
var delay = new Array(1000, 2000, 3000)
var imgobj = new Array()
var s = 0

for (i = 0 ; i < slide.length ; i++) {
imgobj[i] = new Image()
imgobj[i].src = slide[i]
}

function cycle() {
if (s >= slide.length) s = 0
document.images["slideshow"].src = slide[s]
s++
setTimeout("cycle()" , delay[s-1])
}

</script>
</head>
<body>
<img name="slideshow" src="button.gif">
</body>
</html>
<script>
cycle()
</script>

例子說明:

  • 這個例子像動畫 GIF 多過放映機, 如果是放映機, 程式可以簡單一些。 假設你有二十幅圖片, 你可以將所有圖片的檔案名稱改成 slide0.gif , slide1.gif , slide2.gif , ... , slide19.gif , 用變數 s 作為計數器, 那麼檔案名稱字串就可以寫成:
    "slide" + s + ".gif"

     







[到頁頂] [首頁] [速查表]