JavaScript通过select动态更换图片的方法

 这篇文章主要介绍了JavaScript通过select动态更换图片的方法,涉及javascript动态操作图片src的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

 
 

本文实例讲述了JavaScript通过select动态更换图片的方法。分享给大家供大家参考。具体分析如下:

下面的JS代码在select列表变化时触发SetBeerIcon()函数,SetBeerIcon()函数可以根据select选择的值动态修改图片

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

...
<script language="JavaScript" type="text/javascript" >
function setBeerIcon() {
var beerIcon = document.getElementById("beerIcon");
beerIcon.src = "images/"+getSelectValue("beer")+".jpg";
}
</script>
...
<img border="0" src="" id="brandIcon" alt="brand" />
<select name="beer" id="beer" onChange="setButton();setBeerIcon();">
<option value="--Select--">Select beer</option>
<option value="heineken">heineken</option>
<option value="sol">sol</option>
<option value="amstellight">amstellight</option>
<option value="coronalight">coronalight</option>
<option value="coronaextra">coronaextra</option>
<option value=""></option>
</select>

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2024-12-03 19:09:15

JavaScript通过select动态更换图片的方法的相关文章

JavaScript通过select动态更换图片的方法_javascript技巧

本文实例讲述了JavaScript通过select动态更换图片的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码在select列表变化时触发SetBeerIcon()函数,SetBeerIcon()函数可以根据select选择的值动态修改图片 ... <script language="JavaScript" type="text/javascript" > function setBeerIcon() { var beerIcon = doc

Jquery实现动态切换图片的方法

  本文实例讲述了Jquery实现动态切换图片的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

js动态切换图片的方法

 这篇文章主要介绍了js动态切换图片的方法,包含完整的css文件与js文件实现技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了js动态切换图片的方法.分享给大家供大家参考.具体实现方法如下: index.css文件如下:   代码如下: * { margin: 0px;padding: 0px; } body { width: 632px; /*background-color: blue;*/ margin: 0 auto; } #imgsCom { background-

Jquery实现动态切换图片的方法_jquery

本文实例讲述了Jquery实现动态切换图片的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

js动态切换图片的方法_javascript技巧

本文实例讲述了js动态切换图片的方法.分享给大家供大家参考.具体实现方法如下: index.css文件如下: 复制代码 代码如下: * {      margin: 0px;padding: 0px;  }    body {      width: 632px;      /*background-color: blue;*/      margin: 0 auto;  }    #imgsCom {      background-color: yellow;      /*相对定位,为了下

JavaScript生成的动态下雨背景效果实现方法_javascript技巧

本文实例讲述了JavaScript生成的动态下雨背景效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>JavaScript生成的动态下雨背景效果</TITLE> </HEAD> <BODY bgcolor="#fef4d2" > <center> <script language=JavaScript> <!-- [

Javascript获取select标签文本名称的方法

 select 的点击事件用js来使用的话真的是特别的不好用.不灵活不说.而且还要写许多的代码.所以我还是采用的是jquery 这个来获取用户已经选择的 value 的值 .    html select 标签 用户点击后返回 所选 value 值的方法    <select id="diqusheng" >         <option value="alzhai.com">啊宅</option>         <op

windows 8 动态磁贴图片清除方法

1. 在metro界面将鼠标指针滑动到屏幕右下角,直到出现charm栏,选择"设置": 2. 点击"设置"后,选择"磁贴"选项:   3. 点击"磁贴"后选择"清除",即可清除当前磁贴缓存图片,否则即使将照片中的图片删除,该应用的磁贴也依然是原图片.    

javascript中select的赋值问题?

问题描述 javascript中select的赋值问题? 一开始给select赋初始值,但是点击某一方法之后将会给select增加一个数组.那我怎么把一开始给select赋初始值给去掉呢? 解决方案 直接用$(""#select"").html('');如果要动态添加,需要你自己组成 var html = '<option value=""1"">test</option><option valu