透過 JavaScript 我們可以建立動態的圖片。


範例

按紐動畫


JavaScript 動畫

以 JavaScript 來建立動態圖片是可行的。

技巧是讓 JavaScript 透過不同的事件改變不同的圖片。

在下列的例子中 我們會增加一個圖片,讓它有如在網頁上的一個連結按紐,我們再增加一個滑鼠移入 (onMouseOver) 物件及一個滑鼠移出 (onMouseOut) 物件,它會執行二個 JavaScript function 做圖片的轉換。


HTML 程式碼

 HTML 原始碼會是這樣:


onmouseOver="mouseOver('b1')"
onmouseOut="mouseOut('b1')">
Visit W3Schools! src="b_pink.gif"
name="b1" />

請注意,在上面的例子中,我們賦予圖片一個名字,使 JavaScript 在運用它的時候能夠順暢。

滑鼠移入 (onMouseOver) 事件要求瀏灠器一但滑鼠經過圖片,瀏灠器就要執行這個改變圖片的功能。

滑鼠移出 (onMouseOut) 事件要求瀏灠器,一但滑鼠離開圖片,另一個 JavaScript 的功能就應該執行,這個功能的會再插回原來的圖片。

特別注意! 滑鼠事件是增加一個  標示,而不是 標示。不幸的是瀏灠器在圖片上並支援滑鼠事件。 


JavaScript 程式碼

圖片的改變是藉由下列的 JavaScript程式碼所完成的:

滑鼠移入時,function mouseOver() 促使圖片轉換成 "b_blue.gif".

滑鼠移出時,function mouseOut() 促使圖片轉換成 "b_pink.gif".


The Entire Code







onmouseOver="mouseOver('b1')"
onmouseOut="mouseOut('b1')">
Visit W3Schools! src="b_pink.gif" name="b1" />





easonyo 發表在 痞客邦 留言(0) 人氣()