使用 JavaScript 创建动态图像是可行的。
窍门是:使用 JavaScript 通过不同的事件来切换不同的图像。
在下面的例子中,我们要制作一个充当链接按钮的图像。我们将使用 onMouseOver 事件和 onMouseOut 事件来驱动 JavaScript 函数切换图像。
onMouseOver 事件的作用是告知浏览器:一旦鼠标悬浮于图像之上,浏览器就会执行某个函数,这个函数会把这副图像替换为另一幅。
onMouseOut 事件的作用是告知浏览器:一旦鼠标离开图像,浏览器就要执行另一个函数,这个函数会重新插入原来的那幅图像。
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="/i/eg_mouse.jpg
"
}
function mouseOut()
{
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>