首頁 > 開發者 > JavaScript
我們可以使用 JavaScript 來建立動態映像。
執行個體使用 JavaScript 建立生動影像是可行的。
竅門是：使用 JavaScript 通過不同的事件來切換不同的映像。
在下面的例子中，我們要製作一個充當連結按鈕的映像。我們將使用 onMouseOver 事件和 onMouseOut 事件來驅動 JavaScript 函數切換映像。
HTML 程式碼這是 HTML 程式碼：
<a href="http://www.w3school.com.cn" target="_blank"><img border="0" alt="Visit W3School!"src="/i/eg_mouse2.jpg" name="b1"onmouseOver="mouseOver()"onmouseOut="mouseOut()" /></a>
注意：我們已為映像添加了 name 屬性，這樣 JavaScript 就能找到它了。
onMouseOver 事件的作用是告知瀏覽器：一旦滑鼠懸浮於映像之上，瀏覽器就會執行某個函數，這個函數會把這副映像替換為另一幅。
onMouseOut 事件的作用是告知瀏覽器：一旦滑鼠離開映像，瀏覽器就要執行另一個函數，這個函數會重新插入原來的那幅映像。
JavaScript 代碼通過下面的代碼來切換映像：
<script type="text/javascript">function mouseOver(){document.b1.src ="/i/eg_mouse.jpg"}function mouseOut(){document.b1.src ="/i/eg_mouse2.jpg"}</script>
函數 mouseOver() 將映像切換為 "eg_mouse.jpg"。
函數 mouseOut() 將映像切換為 "eg_mouse2.jpg"。
完整的代碼：<html><head><script type="text/javascript">functionmouseOver(){ document.b1.src ="/i/eg_mouse.jpg" }functionmouseOut(){ document.b1.src ="/i/eg_mouse2.jpg" }</script></head><body><a href="http://www.w3school.com.cn" target="_blank"><img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"onmouseOver="mouseOver()"onmouseOut="mouseOut()"/></a></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
