Div改变背景图片

   有很多个Div要求是点击其中一个div要变成另一张背景图片！
   但是点击另一张DIV，那张Div要变回来。点击的那张变成那张的背景图片！

   请高手指点一下！提供一个案例一下！

解决方案 »

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

<html>
<head>
<style>
div{width:200px;height:200px;}
</style>
<script>
function img(d)
{
ds = document.getElementsByTagName("div")
for(i=0;i<ds.length;i++)
{
if(ds[i].getAttribute("oldImg"))
ds[i].style.backgroundImage=ds[i].getAttribute("oldImg")
}
d.setAttribute("oldImg",d.style.backgroundImage)
d.style.backgroundImage="url(http://dotnet.aspx.cc/Images/mvp.gif)"
}
</script>
</head>
<body>
<div onclick="img(this)" style="background:url(http://dotnet.aspx.cc/Images/logoSite.gif)">dd</div>
<div onclick="img(this)" style="background:url(http://i3.sinaimg.cn/dy/U2107P1T124D2F2633DT20100601063359.jpg)">dd</div>
<div onclick="img(this)" style="background:url(http://dotnet.aspx.cc/Images/logoSite.gif)">dd</div>
</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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档 </title>
<style type="text/css">
div{WIDTH:50px; HEIGHT:50px; background:#ff0000;margin:10px}
.classa{background:#AAA}
.classb{background:#BBB}
.classc{background:#CCC}
.classd{background:#DDD}
</style>
<script language="javascript">
var obj;
window.onload=function(){
    var div=document.getElementsByTagName("div");
    for(var j=0; j<div.length; j++){
        div[j].onclick=function(){
            //this.innerHTML="current";
            this.style.backgroundImage="url("+this.getAttribute("src")+")";
            if(obj)obj.style.backgroundImage="";
            obj=this;
        };
    }
}
</script>
</head>
<body>
  <div class="classa" src="http://avatar.profile.csdn.net/D/9/A/2_a365477312.jpg"></div>
  <div class="classb" src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"></div>
  <div class="classc" src="http://avatar.profile.csdn.net/B/8/9/2_shan1119.jpg"></div>
  <div class="classd" src="http://avatar.profile.csdn.net/B/3/4/2_renrain1.jpg"></div>
</body>
</html>
这个用jquery非常简单比如
用toggle函数是个奇偶事件点击一次变成图片，再点击变成背景$(function(){
    $("#test").toggle(function(){
                          $(this).attr("background","url(images/1.png)");
                      },function(){
                          $(this).attr("background","#cccccc");//也可以是开始的那种颜色
                      });
});
<style>
.demo {width:100; height:100; border:1px solid black; cursor:hand;}
</style>
<div id="div1" width="500">
<div class="demo" onclick="show(this)" style="background:url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png)"></div>
<div class="demo" onclick="show(this)" style="background:url(http://www.baidu.com/img/baidu_logo_jr_1006_61.gif)"></div>
<div class="demo" onclick="show(this)" style="background:url(http://i1.sinaimg.cn/home/deco/2009/0330/logo_home.gif)"></div>
</div>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>