Jascript特效：实现下拉列表和图片联动

效果如图：选择您的头像换左边的头像图片，示例演示： http://www.dwww.cn/Books.asp

第一种方法：
<script language=”javascript” type=”text/javascript”>
function ChangeImg(id)
{
var userface = id;
document.getElementById(“imgFace”).src = “http://dwww.cn/images/book/js”+ userface.options[userface.selectedIndex].value+”.gif”
}
</script>

您的头像：
<select name=”userface” size=”1″ onchange=”ChangeImg(this)” runat=”server”>
<option value=”01″ >01</option>
<option value=”02″>02</option>
<option value=”03″>03</option>
<option value=”04″>04</option>
</select>&nbsp;<img ID=”imgFace” runat=”server” class=”face” src=”http://dwww.cn/images/book/js01.gif” />

另外一种方法：

<IMG src=”http://www.dwww.cn/images/book/js01.gif” width=”97″ height=”90″ id=i1>
您的头像：

<SELECT id=dwww_userPhoto onchange=”document.all.i1.src=’http://www.dwww.cn/images/book/’+this.value” name=dwww_userPhoto>
<OPTION value=js01.gif selected>靓妹1</OPTION>
<OPTION value=js02.gif>靓妹2</OPTION>
<OPTION value=js03.gif>靓妹3</OPTION>
<OPTION value=js04.gif>靓妹4</OPTION>
</SELECT>

出处：http://www.dwww.cn