急:如何实现菜单图片点击变换

Question

方法笨点
点击第一个菜单图片1.gif，显示1a.gif, 2.gif   隐藏1.gif, 2a.gif 。同时点击第二个菜单图片2.gif，显示1.gif,2a.gif  隐藏1a.gif, 2.gif    。只要控制图片的显示和隐藏就好了

Answer 1

<table id="tableId">
    <tr>
        <td ><a href="#" class="b"> <img border="0" src="image/1.gif"></a></td>
        <td ><a href="#" class="b"><img border="0" src="image/2.gif"></a></td>
        <td ><a href="#" class="b"><img border="0" src="image/3.gif"></a></td>
    </tr>
</table>
<script language="javascript">
<!--
    window.onload = function(){
        document.getElementById("tableId").onclick = function(event){
            event = window.event || event;
            var srcElement = event.srcElement || event.target;
            if(srcElement.tagName.toUpperCase() != "IMG")return;
            
            if(window._lastClickImg_){
                window._lastClickImg_.src = window._lastClickImg_.src.replace("a.", ".");
            }
            window._lastClickImg_ = srcElement;
            srcElement.src = srcElement.src.replace(".", "a.");
        }
    }
//-->
</script>

Answer 2

<tr>
<td><a href="#" class="b" onclick="swap('img1')"><img border="0" id="img1" src="image/1.gif"></a></td>
<td><a href="#" class="b" onclick="swap('img2')"><img border="0" id="img2" src="image/2.gif"></a></td>
<td><a href="#" class="b" onclick="swap('img3')"><img border="0" id="img3" src="image/3.gif"></a></td>
</tr><script language="Javascript">
srcs = new Array("image/1.gif","image/2.gif","image/3.gif");
newsrcs = new Array("image/1a.gif","image/2a.gif","image/3a.gif");
imgs = new Array("img1","img2","img3");
function swap(oID)
{
o = document.getElementById(oID);
for(c=0;c<imgs.length;c++)
{
if(imgs[c] == oID) document.getElementById(oID).src=newsrcs[c];
else document.getElementById(imgs[c]).src=srcs[c];
}
}
</script>