Jascript特效：实现下拉列表和图片联动(论坛头像)

作者:admin 日期:2008-02-20

字体大小: 小中大

Javascript特效：实现下拉列表和图片联动
效果如图：选择您的头像换左边的头像图片，示例演示：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="http://www.dwww.cn/News/2008-2/01/" >01</option>
<option value="http://www.dwww.cn/News/2008-2/02/">02</option>
<option value="http://www.dwww.cn/News/2008-2/03/">03</option>
<option value="http://www.dwww.cn/News/2008-2/04/">04</option>
</select> <img ID="imgFace" runat="server" class="face" src="/UserFiles/Image/RemoteFiles/2008-2-1/20080201172033LN1BY76VQ2.gif" />

另外一种方法：

<IMG src="/UserFiles/Image/RemoteFiles/2008-2-1/200802011720347P18BIEF38.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=/UserFiles/Image/RemoteFiles/2008-2-1/2008020117203463ZP9WTH29.gif selected>靓妹1</OPTION>
<OPTION value=/UserFiles/Image/RemoteFiles/2008-2-1/200802011720344K09C5SBUH.gif>靓妹2</OPTION>
<OPTION value=/UserFiles/Image/RemoteFiles/2008-2-1/20080201172034Y96O5TN3HR.gif>靓妹3</OPTION>
<OPTION value=/UserFiles/Image/RemoteFiles/2008-2-1/20080201172034590ELQZ53B.gif>靓妹4</OPTION>
</Select>