透過 JavaScript 我們可以建立動態的圖片。
範例
JavaScript 動畫
以 JavaScript 來建立動態圖片是可行的。
技巧是讓 JavaScript 透過不同的事件改變不同的圖片。
在下列的例子中 我們會增加一個圖片,讓它有如在網頁上的一個連結按紐,我們再增加一個滑鼠移入 (onMouseOver) 物件及一個滑鼠移出 (onMouseOut) 物件,它會執行二個 JavaScript function 做圖片的轉換。
HTML 程式碼
HTML 原始碼會是這樣:
onmouseOver="mouseOver('b1')" |
請注意,在上面的例子中,我們賦予圖片一個名字,使 JavaScript 在運用它的時候能夠順暢。
滑鼠移入 (onMouseOver) 事件要求瀏灠器一但滑鼠經過圖片,瀏灠器就要執行這個改變圖片的功能。
滑鼠移出 (onMouseOut) 事件要求瀏灠器,一但滑鼠離開圖片,另一個 JavaScript 的功能就應該執行,這個功能的會再插回原來的圖片。
特別注意! 滑鼠事件是增加一個 標示,而不是 標示。不幸的是瀏灠器在圖片上並支援滑鼠事件。
JavaScript 程式碼
圖片的改變是藉由下列的 JavaScript程式碼所完成的:
|
滑鼠移入時,function mouseOver() 促使圖片轉換成 "b_blue.gif".
滑鼠移出時,function mouseOut() 促使圖片轉換成 "b_pink.gif".
The Entire Code
|
全站熱搜
留言列表