站内搜索：

在线手册

javascript教程——基础教程

JavaScript 动画
作者：不详   2008-5-1

我们可以使用JavaScript来创建动态的图像。

JavaScript 动画

使用JavaScript创建动态图像是可行的。

窍门是：使用JavaScript通过不同的事件来切换不同的图像。

在下面的例子中，我们要制作一个充当链接按钮的图像。我们将使用onMouseOver事件和onMouseOut事件来驱动JavaScript函数切换图像。

HTML 代码

这是HTML代码：

<a href="http://www.86w3.com" target="_blank"> 
<img border="0" alt="Visit 86w3!" 
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"> 
function mouseOver() 
  { 
  document.b1.src ="b_blue.gif" 
  } 
function mouseOut() 
  { 
  document.b1.src ="b_pink.gif" 
  } 
</script> 
</head> 

<body> 
<a href="http://www.86w3.com" target="_blank"> 
<img border="0" alt="Visit 86w3!" src="b_pink.gif" name="b1" 
onmouseOver="mouseOver()" 
onmouseOut="mouseOut()" /> 
</a> 
</body> 
</html>
本站文章可直接用浏览器打印，无须专门打印页。    TOP