假设有3张背景图片P1   P2   P3和2个联接A1   A2   
当鼠标不点联接时A1   A2的背景图片为P1   
当鼠标onmouseover到A1时A1背景变成P2 
当鼠标onclick到A1时A1背景变成P3 
当鼠标onclick到A2时A2背景变成P3   A1背景变成P1 
这样的JS怎么写   求高手指点代码<head>
<title>无标题文档</title>
</head><body>
<script   language=javascript> 
    
  function   ch_bg(obj_in_cell,new_picture)   
  {   
          obj_in_cell.parentNode.background=new_picture;   
  }  
   var temp;
  function  cb_bg(o)
  {
         if(temp =! undefined){
 tem.style.background = "图片P1";} 
          temp=o;             o.style.background="图片P3";
  }
  </script>   
    
    
    
  <table   border=1><tr>  
  <td width="1" id="dnt"></td> 
  <td   background="图片P1" height="100" width="100" ><a   href="http://www.baidu.com"   target="_blank"  onclick="cb_bg(this)" onmouseover="ch_bg(this,'图片P2')" onmouseout="ch_bg(this,'图片P1')">A1</a></td>  
  <td   background="图片P1" height="100" width="100"><a   href="http://www.baidu.com"   target="_blank"   onclick="cb_bg(this)" onmouseover="ch_bg(this,'图片P2')" onmouseout="ch_bg(this,'图片P1')">A2</a></td>  
  </tr></table>
</body>
</html>

解决方案 »

  1.   

    dreamweaver好像有现成的东西可以生成代码吧。
      

  2.   

    下面这种效果???
    你加了mouseover和mouseout处理函数,你点击后一动鼠标设置的背景图片就没有了?这样有什么特别意义吗???<head> 
    <title> 无标题文档 </title> 
    </head> <body> 
    <script       language=javascript>   
            
        function       ch_bg(obj_in_cell,new_picture)       
        {       
                        obj_in_cell.parentNode.background=new_picture;       
        }     
        function     cb_bg(o) 
        { 
                  if(o=="a1")
                    document.getElementById("dnt1").background="3h.jpg";
                  else
                  {
                    document.getElementById("dnt1").background="1h.jpg";
                    document.getElementById("dnt2").background="3h.jpg";
                  }
        } 
        </script>       
            
            
            
        <table       border=1> <tr>     
        <td   width="1"   id="dnt1"> </td>   
        <td       background="1h.jpg"   height="100"   width="100 "   > <a       href="http://www.baidu.com"       target="_blank "     onclick="cb_bg('a1')"   onmouseover="ch_bg(this, '2h.jpg')"   onmouseout="ch_bg(this, '1h.jpg')"> A1 </a> </td>     
        <td       background="1h.jpg"   id="dnt2"  height="100"   width="100 "> <a       href="http://www.baidu.com"       target="_blank"       onclick="cb_bg('a2')"   onmouseover="ch_bg(this, '2h.jpg')"   onmouseout="ch_bg(this, '1h.jpg')"> A2 </a> </td>     
        </tr> </table> 
    </body> 
    </html> 
      

  3.   

    我 是想做成WINDOWS菜单按钮的形式
      

  4.   

    <!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>
    <title> new document </title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style type="text/css">
    body{margin:0px;background-color:#fff;color:#000;font-size:12px;font-family:宋体}
    dl, ul{list-style:none;margin:0px;padding:0px}
    dl dd, ul li{margin:0px;padding:0px}ul.sw{padding-left:1px;height:24px;line-height:24px;overflow:hidden;}
    ul.sw li{float:left;display:inline;margin-left:-1px;text-align:center;cursor:pointer}
    ul.sw li a{display:block;height:100%}
    ul.sw li a{width:49px;float:left;}
    ul.sw li a:link, ul.sw li a:visited{background:url(http://img.china.alibaba.com/images/wangshang/071024/sw1_w2_n.gif) no-repeat;}
    ul.sw li a:hover{background:red;} /*这里修改 hover 图片背景*/
    ul.sw li.hov a{color:#ff7300;font-weight:bold;background:url(http://img.china.alibaba.com/images/wangshang/071024/sw1_w2_v.gif) no-repeat !important;}/*这里修改 click 图片背景*/.dn{display:none !important}
    </style>
    <script type="text/javascript">
    <!--
    function swInitialize(nm,m){
    var ula = document.getElementById(nm+'_a')
    var ulb = document.getElementById(nm+'_b')
    var lisa = ula.getElementsByTagName('li')
    var lisb = ulb.getElementsByTagName('dd') 
    var i
    ulb.setAttribute('curr_li',m)
    for(i=0; i<lisb.length; i++){
    if(i != m)
    lisb[i].className = 'dn'
    else{
    lisb[i].className = ''
    }
    }

    for(i=0; i<lisa.length; i++){
    lisa[i].setAttribute('num',i)
    if(i == m){
    lisa[i].className = 'hov'
    }
    lisa[i].onclick = function(){
    var c = parseInt(ulb.getAttribute('curr_li'))
    lisa[c].className = ''
    lisb[c].className = 'dn'
    var n = this.getAttribute('num')
    this.className = 'hov'
    lisb[n].className = ''
    ulb.setAttribute('curr_li',n)
    }
    }
    } function aLnkClk(o){
    o.className = 'v'
    return false
    }
    //-->
    </script>
    </head><body>
    <div style="width:360px">
    <ul id="sw_a" class="sw">
    <li><a href="#" onclick="return false">网商</a></li>
    <li><a href="#" onclick="return false">诚信</a></li>
    </ul>
    <div class="cont pt9" style="height:205px">
    <dl id="sw_b">
    <dd class="">
    1
    </dd>
    <dd class="dn">
    2
    </dd>
    </dl>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    swInitialize('sw',0)
    //-->
    </script></body>
    </html>