头像轻松换

头像轻松换
——在网页中利用JavaScript制作更换头像效果
我们在网上注册时经常会遇到设置用户的头像问题，经过一段的学习，总结了实现更换头像的几种方法。

（注：头像在网页所在文件夹下的images文件夹下，文件名为：1.jpg、2.jpg、3.jpg、4.jpg等。

）
第一种方法：实现效果：当从下拉列表框中选择某个选项时，头像区会显示相应的头像。

在网页head部分的代码如下：
<script sytle="text/javascript">
//建立一个函数，当下拉列表框的值变动时，将其值(头像url)赋给图像的值。

function onchangephoto(file)
{
document.form1.img.src=file;
}
</script>
Body区的代码：
<form name="form1" id="form1" action="">
<select name="selec" id="selec" onchange="onchangephoto(this.value);">
<option value="1.jpg" >1</option>
<option value="2.jpg">2</option>
<option value="3.jpg">3</option>
<option value="4.jpg">4</option>
<option value="5.jpg">5</option>
</select>
<img id="img" name="img" src="1.jpg" />
</form>
第二种方法：在上一种方法中有一个缺陷，就是只有当选择了下拉列表框的村某个选项后，头像才发生变化。

而在第二种方法中，单击网页中的头像会打开一个窗口，我们只在单击该窗中的某个头像，网页中就会随着发生相应的变化。

该效果中用到ShowdModlDialog,以IE 窗口模式打开一个窗口，returnvalue返回窗口的值。

网页main.htmlr的Head区代码如下：
<script type="text/javascript">
funtion show_photo(){
var
p_src=window.ShowModalDialog("show_photo.html",null,"width=400p,height=400"); //弹出宽和高都是400的一个模拟窗口show_photo.html.
document.form1.img.src=p_src; //将弹出窗口的值返回给img的src属性。

}
网页Main.html中Body部分代码：
<img id="img" name="img" src="1.jpg" onclick="show_photo()" />
单击头像后弹出的窗口show_photo.html的部分代码：
Head头部代码：
<script type="text/javascript">
function re_photo(p_add){
window.returnvalue=p_add //将所单击的图片的地址赋给窗口的返回值。

window.close(); //关闭关像选择窗口。

}
</script
Body区显示头像代码：
<img src="1.jpg" onclick="re_photo():" />
<img src="2.jpg" onclick="re_photo():" />
<img src="3.jpg" onclick="re_photo():" />
<img src="4.jpg" onclick="re_photo():" />
<img src="5.jpg" onclick="re_photo():" />
<img src="6.jpg" onclick="re_photo():" />
<img src="7.jpg" onclick="re_photo():" />
<img src="8.jpg" onclick="re_photo():" />
至此，效果完成。

第三种方法：实现的效果和第二种相仿，只不过利用的是比较常用的open方法。

网页main.html中的头部head区的代码：
<script type="text/javascript">
funtion show_photo(){
window.open("show_photo.html",null,"width=400p,height=400"); //弹出宽和高都是400的一个窗口show_photo.html.
}
</script>
body部分：
<img id="photo" name="photo" src="1.jpg" onclick="show_photo()" />
单击以上的头像弹出窗口show_photo.html.其head区脚本：
<script type="text/javascript">
function re_photo(p_add){
window.opener.document.GetElementById("photo').src=p_add //将所单击的图片的地址赋给此窗口的父窗口内img标签的src属性。

window.close(); //关闭关像选择窗口。

}
Body区显示所有的头像代码：
<img src="1.jpg" onclick="re_photo():" />
<img src="2.jpg" onclick="re_photo():" />
<img src="3.jpg" onclick="re_photo():" />
<img src="4.jpg" onclick="re_photo():" />
<img src="5.jpg" onclick="re_photo():" />
<img src="6.jpg" onclick="re_photo():" />
<img src="7.jpg" onclick="re_photo():" />
<img src="8.jpg" onclick="re_photo():" />
至此三种方法完成，相比较，第二和第三种方法选择头像更加直观，但是需要弹出另外后个窗口，而在第一种方法中没用到其它的网页。

我们可以根据自己的情况选择其中的种来应用。

以上是我初学JavaScript制作网页时的一点积累，有不到之处还请批评指正。