2012-11-08 来源:网络
【实例名称】
JS实现图片的选择展示
【实例描述】
在相册、付款或新闻页面中经常需要用户进行选择,并在选择的同时展示图片界面以确认用户的选择。本例学习使用下拉框实现图片选择展示的效果。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> </head> <body> <CENTER> <img width=260 height=200 src="http://www.baidu.com/img/logo.gif" name="img1"> </CENTER> <CENTER> <SELECT onChange="document.img1.src= options[selectedIndex].value"> <option value="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"> goole搜索</option> <option value="http://www.baidu.com/img/logo.gif"> 百度搜索</option> <option value="http://search.cn.yimg.com/i/070420/lg.gif"> 雅虎搜索</option> </SELECT> </CENTER> </body> </html>
【运行效果】
【难点剖析】
本例提供了3个搜索LOGO的选择,重点是Select控件的“onchange”事件。当用户选择下拉框中的数据时,根据用户_选择值的索引“options[selectedIndex]”,用img控件显用户选择的LOGO。
【源码下载】
为了JS代码的准确性,请点击:JS实现图片的选择展示 进行本实例源码下载