网页上选中图片后高亮显示

网页上横放5张图片，想在点击某张图片后，该图片高亮显示，其它的不变，点击另外一张，前面一张恢复，新图片高亮显示。请高人指点，最好有代码，小弟菜鸟.谢谢

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

是这样子的么
<!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">
<style type="text/css">
img{ float:left; margin:10px; cursor:pointer;}
.filter{filter:alpha(opacity=20);-moz-opacity:0.2;}
</style>
<script type="text/javascript">
window.onload=function(){
var img=document.getElementsByTagName("img");
var L=img.length;
for(i=0;i<L;i++){
img[i].className="filter";
img[i].onclick=Function("clear();this.className=''");
}
}
function clear(){
var img=document.getElementsByTagName("img");
var L=img.length;
for(i=0;i<L;i++){
img[i].className="filter";
}
}
</script>
<body>
<img src="http://www.hao123.com/images/logo_140.gif" />
<img src="http://www.hao123.com/images/logo_140.gif" />
<img src="http://www.hao123.com/images/logo_140.gif" />
<img src="http://www.hao123.com/images/logo_140.gif" />
<img src="http://www.hao123.com/images/logo_140.gif" />

</body>
</html>
如何只刷新table的其中一行？
如你所愿了不，结贴吧，LZ<!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">
<style type="text/css">
img{ float:left; margin:10px; cursor:pointer;}
.filter{filter:alpha(opacity=20);-moz-opacity:0.2;}
</style>
<script type="text/javascript">
window.onload=function(){
    var thepic=parseInt(document.cookie.split(";")[0].split("=")[1]);
    var img=document.getElementsByTagName("img");
    var L=img.length;
    for(i=0;i<L;i++){
        img[i].className="filter";
        img[i].onclick=Function("clear("+i+");this.className=''");
    }
    if(thepic){
        img[thepic].className='';
    }
}
function clear(i){
    expireDate=new Date;
    expireDate.setYear(expireDate.getYear()+1);
    document.cookie="thepic="+i;
    var img=document.getElementsByTagName("img");
    var L=img.length;
    for(i=0;i<L;i++){
        img[i].className="filter";
    }
}
</script>
<body>
<img src="http://www.hao123.com/images/logo_140.gif" />
<img src="http://www.hao123.com/images/logo_140.gif" />
<img src="http://www.hao123.com/images/logo_140.gif" />
<img src="http://www.hao123.com/images/logo_140.gif" />
<img src="http://www.hao123.com/images/logo_140.gif" />

</body>
</html>
更正下
<!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">
<style type="text/css">
img{ float:left; margin:10px; cursor:pointer;}
.filter{filter:alpha(opacity=20);-moz-opacity:0.2;}
</style>
<script type="text/javascript">
window.onload=function(){
    var thepic=parseInt(document.cookie.split(";")[0].split("=")[1])+1;
    //thepic="";
    var img=document.getElementsByTagName("img");
    var L=img.length;
    for(i=0;i<L;i++){
        img[i].className="filter";
        img[i].onclick=Function("clear("+i+");this.className=''");
    }
    if(thepic){
      img[thepic-1].className='';
    }
}
function clear(i){
    expireDate=new Date;
    expireDate.setYear(expireDate.getYear()+1);
    document.cookie="thepic="+i;
    var img=document.getElementsByTagName("img");
    var L=img.length;
    for(i=0;i<L;i++){
        img[i].className="filter";
    }
}
</script>
<body>
<img src="http://www.hao123.com/images/logo_140.gif" />
<img src="http://www.hao123.com/images/logo_140.gif" />
<img src="http://www.hao123.com/images/logo_140.gif" />
<img src="http://www.hao123.com/images/logo_140.gif" />
<img src="http://www.hao123.com/images/logo_140.gif" />

</body>
</html>