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

2025-10-27 22:29:32

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

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

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

4、示例源码如下:

 

<html>

 

<head>

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 

<title>用JavaScript动态更换图像元素中的图像</title>

 

</head>

 

<body>

 

<center>

 

<h1>用JavaScript动态更换图像元素中的图像</h1>

 

<hr>

 

<br>

 

<form name="form1">

 

选择选项...

 

<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="#" mce_href="#"><img style="border:none; 

</form>

 

</center>

 

</body>

 

</html>

5、运行该程序后,页面出现一幅图像和一个选择框,如图所示,当用鼠标选择选择框中的内容并改变,页面上的图像会随着改变,如下图所示。

 

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

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢