js+css导航条问题

部分代码如下：
<table width="93%" border="0" align="center" cellpadding="0" cellspacing="0" background="barbg.gif">
 <tr>
     <td width="4"><img src="images/barleft.png" width="4" height="31"></td>
     <td width="25%" align="center"><a href="system.htm" class="topmenu">System</a></td>
     <td width="1"><img src="images/barseperator.gif" width="1" height="31"></td>
     <td width="25%" align="center"><a href="wireless.htm" class="topmenu">Wireless</a></td>
     <td width="1"><img src="images/barseperator.gif" width="1" height="31"></td>
     <td width="25%" align="center"><a href="status.htm" class="topmenu">Status</a></td>
     <td width="1"><img src="images/barseperator.gif" width="1" height="31"></td>
     <td width="25%" align="center"><a href="passwd.htm" class="topmenu">Password</a></td>
     <td width="4"><img src="images/barright.png" width="4" height="31"></td>
 </tr>
</table>css 如下：
.topmenu:link {
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.topmenu:visited {
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.topmenu:hover {
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}我想实现的功能是：当我点击一个选项后(例如 system), 该超链接所在的td块背景变成一个图片(select.gif)，当选项没有被选中的时候，选项保持原来背景（barbg.gif）。请问，如何实现，是否用CSS就可以，还是说要加入javascripts， 谢谢～

解决方案 »

  1.   

    在你的那些css中的a的各个动作的样式中加入background: url(你的图片的链接)
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD>
    <style>
    .topmenu:link { 
    font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif; 
    font-size: 15px; 
    font-weight: bold; 
    color: #FFFFFF; 
    text-decoration: none; 
    } 
    .topmenu:visited { 
    font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif; 
    font-size: 15px; 
    font-weight: bold; 
    color: #FFFFFF; 
    text-decoration: none; 
    } 
    .topmenu:hover { 
    font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif; 
    font-size: 15px; 
    font-weight: bold; 
    color: #FFFFFF; 
    text-decoration: underline; 
    } 
    </style>
    <script>
    var lastClickLink;
    function clickLink(obj){
    if(lastClickLink){
    lastClickLink.parentNode.style.cssText="background:url(barbg.gif);";
    }
    obj.parentNode.style.cssText="background:url(select.gif);";
    lastClickLink=obj;
    }
    </script>
    <BODY>
    <table width="93%" border="1" align="center" cellpadding="0" cellspacing="0" background="barbg.gif"> 
    <tr> 
        <td width="4"> <img src="images/barleft.png" width="4" height="31"> </td> 
        <td width="25%" align="center"> <a href="system.htm" onclick="clickLink(this);" class="topmenu">System </a>dd </td> 
        <td width="1"> <img src="images/barseperator.gif" width="1" height="31"> </td> 
        <td width="25%" align="center"> <a href="wireless.htm" onclick="clickLink(this);" class="topmenu">Wireless </a> </td> 
        <td width="1"> <img src="images/barseperator.gif" width="1" height="31"> </td> 
        <td width="25%" align="center"> <a href="status.htm" onclick="clickLink(this);" class="topmenu">Status </a> </td> 
        <td width="1"> <img src="images/barseperator.gif" width="1" height="31"> </td> 
        <td width="25%" align="center"> <a href="passwd.htm" onclick="clickLink(this);" class="topmenu">Password </a> </td> 
        <td width="4"> <img src="images/barright.png" width="4" height="31"> </td> 
    </tr> 
    </table> 
    </BODY>
    </HTML>