js改變背景

.ranking{width:274px; height:255px;}
.ranking .title{ height:27px; line-height:26px; padding-bottom:1px; background-color:#FFFFFF; background:url(../p_w_picpaths/bg-10.jpg) no-repeat;}
.ranking .title a{ float:left; display:block; width:105px; color:#a6a0a0; text-align:center;}
.ranking .title span a{color:#ffffff;}
.ranking ul{ margin-top:-2px; padding:10px 13px;  border:1px solid #a6a0a0; border-top:none}
.ranking li{ height:21px; line-height:21px;}
.ranking li a{ color:#333333;}
.ranking li img{ margin-right:8px;}
<script language="javascript">
function chgRanking(i){ 
 if(i==1){   
  document.getElementById("ranking").style.background="url(p_w_picpaths/bg-10.jpg) no-repeat";   
  document.getElementById("a1").style.color="#a6a0a0";
  document.getElementById("a2").style.color="#ffffff";
 }else{   
  document.getElementById("ranking").style.background="url(p_w_picpaths/bg-13.jpg) no-repeat";
  document.getElementById("a2").style.color="#a6a0a0";
  document.getElementById("a1").style.color="#ffffff";
 }
}
</script>

 

<div class="ranking">
   <div class="title" id="ranking"><a href="#" id="a1" </a><span><a href="#" id="a2" onmouseover="chgRanking(2)">配件點擊排行</a></span></div>
   <ul>
    <li><img src="p_w_picpaths/tb1.jpg" /><a href="#">產家直銷 通用電源開關</a></li>
    <li><img src="p_w_picpaths/tb2.jpg" /><a href="#">產家直銷 通用電源開關</a></li>
    <li><img src="p_w_picpaths/tb3.jpg" /><a href="#">產家直銷 通用電源開關</a></li>
    <li><img src="p_w_picpaths/tb4.jpg" /><a href="#">產家直銷 通用電源開關</a></li>
    <li><img src="p_w_picpaths/tb5.jpg" /><a href="#">產家直銷 通用電源開關</a></li>
    <li><img src="p_w_picpaths/tb6.jpg" /><a href="#">產家直銷 通用電源開關</a></li>
    <li><img src="p_w_picpaths/tb7.jpg" /><a href="#">產家直銷 通用電源開關</a></li>
    <li><img src="p_w_picpaths/tb8.jpg" /><a href="#">產家直銷 通用電源開關</a></li>
    <li><img src="p_w_picpaths/tb9.jpg" /><a href="#">產家直銷 通用電源開關</a></li>
    <li><img src="p_w_picpaths/tb10.jpg" /><a href="#">產家直銷 通用電源開關</a></li>
   </ul>
  </div>