js变换显示图片的实例
2013-04-16 00:00
531 查看
开始界面如图:
<head> <title></title> <script type="text/javascript"> function UpdateImg() { //document.getElementById('img1').setAttribute('src', 'images/2.jpg'); var dogandcat = document.getElementsByName('dogandcat'); //获取所有name=dogandcat的单选按钮 for (var i = 0; i < dogandcat.length; i++) { if (dogandcat[i].checked == true) { var value = dogandcat[i].getAttribute('value'); switch (value) { case '2': document.getElementById('img1').setAttribute('src', 'images/2.jpg'); break; case '3': document.getElementById('img1').setAttribute('src', 'images/3.jpg'); break; case '4': document.getElementById('img1').setAttribute('src', 'images/4.jpg'); break; case '6': document.getElementById('img1').setAttribute('src', 'images/6.jpg'); break; } } } } </script> </head> <body> <img id="img1" src="images/9.jpg" width="200px" height="200px" /> <br /> <input type="button" value="改变图片" onclick="UpdateImg();" /> <br /> <input id="Radio1" name="dogandcat" type="radio" value="2" onclick="UpdateImg();" />忧伤的小狗 <input id="Radio2" name="dogandcat" type="radio" value="3" onclick="UpdateImg();"/>卖萌的小狗 <input id="Radio3" name="dogandcat" type="radio" value="4" onclick="UpdateImg();"/>愤怒的小狗 <input id="Radio4" name="dogandcat" type="radio" value="6" onclick="UpdateImg();"/>可爱的小猫 </body> 下面是程序运行时的界面:点击不同的按钮图片是不一样的
相关文章推荐
- js变换显示图片的实例
- JS小功能(setInterval实现图片效果显示时间)实例代码
- js 鼠标移动显示图片的简单实例
- JS小功能(setInterval实现图片效果显示时间)实例代码
- js 鼠标移动显示图片的简单实例
- js图片轮换显示实例
- js显示图片变换
- JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
- Android深入浅出系列之实例应用—简单的手指拖动图片,图片滑来滑去显示应用Gallery和BaseAdapter以及ImageView的使用
- js上传图片及预览功能实例分析
- JS控制图片显示的大小(图片等比例缩放)
- nodejs+express+ajax实现图片上传及显示
- Android 图片存入系统相册更新显示实例详解
- JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
- 【js实例】js实现点击标题标签切换显示对应内容
- js实现精美的图片跟随鼠标效果实例
- 变换显示数据库图片(2/3)
- js+css样式表实现鼠标移动变换显示内容效果
- js实现的鼠标放上和移开显示不同图片和文字,样式比较好看
- js 切换图片隐藏显示div层