我们可以使用 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="b_pink.gif" name="b1" onmouseOver="mouseOver()" onmouseOut="mouseOut()" /> </a>
注意:我们已为图像添加了 name 属性,这样 JavaScript 就能找到它了。
onMouseOver 事件的作用是告知浏览器:一旦鼠标悬浮于图像之上,浏览器就会执行某个函数,这个函数会把这副图像替换为另一幅。
onMouseOut 事件的作用是告知浏览器:一旦鼠标离开图像,浏览器就要执行另一个函数,这个函数会重新插入原来的那幅图像。
JavaScript 代码
通过下面的代码来切换图像:
<script type="text/javascript"> function mouseOver() { document.b1.src ="b_blue.gif" } function mouseOut() { document.b1.src ="b_pink.gif" } </script>
函数 mouseOver() 将图像切换为 "b_blue.gif"。
函数 mouseOut() 将图像切换为 "b_pink.gif"。
完整的代码:
<html> <head> <script type="text/javascript"> functionmouseOver()
{ document.b1.src ="b_blue.gif
" } functionmouseOut()
{ document.b1.src ="b_pink.gif
" } </script> </head> <body> <a href="http://www.w3school.com.cn" target="_blank"> <img border="0" alt="Visit W3School!" src="b_pink.gif" name="b1"onmouseOver="mouseOver()" onmouseOut="mouseOut()"
/> </a> </body> </html>