用JavaScript动态更换图像元素中的图像

本节实例给出了一个动态更换图像的方法，当选择某个图像选项时，该图像会切换为另一幅图像。

　　本节代码主要使用了 onChange 事件和HTML中<img>标签 src 属性，主要功能和用法如下。

　　• 当选择框选择的内容改变时，onChange事件会被触发。该事件可以调用相应的函数，作为其事件处理函数。在函数中，可以是任意合法的JavaScript代码。

　　• src 属性对应HTML中<img>标签的 src 属性，用来表示<img>中要显示的图像。该属性可以赋值，根据不同的值，调用并显示不同的图像。

　　• <img>标签还有 width 和 height 属性，用来指出图像将以何种大小进行显示。如果不指定这两个属性的值，图像将以原始大小显示;如果仅指定其中一个属性的值，另一个属性的取值将是图像原始大小的值。

代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>用JavaScript动态更换图像元素中的图像</title>
</head>

<body>
<center>
<h1>用JavaScript动态更换图像元素中的图像</h1>
<hr>
<br>
<form name="form1">
<!-- 为选择框绑定onChange事件脚本 -->
选择选项...
<select onChange="document.x1.src=options[selectedIndex].value">
  <option value="1.jpg">看看图片1</option>
  <option value="2.jpg">看看图片2</option>
  <option value="3.jpg">看看图片3</option>
</select>
<br />
<br />
<!-- 以上是程序初始时显示的图片 -->
<a href="#"><img style="border:none;" width="270" height="129" src="1.jpg" name="x1"></a>
</form>
</center>
</body>
</html>

posted on 2010-12-27 11:32 xylxq1925 阅读(261) 评论(0) 收藏举报