跪求高手指导，鼠标单击事件
我现在有两个效果：一个是点击隐藏右边div的效果，但有缺点，就是载入网页成功后，第一次关闭右侧需要点击2下才能关闭，代码如下：
<script type="text/javascript">
    function side(a){
        if(a.innerHTML == "关闭边栏"){
            document.getElementById("div2").style.display= "none";
            document.getElementById("div1").style.width = "100%";
            document.getElementById("div2").style.width = "0px";
            a.innerHTML = "打开边栏";
        }else{
            document.getElementById("div2").style.display= "";
            document.getElementById("div1").style.width = "75%";
            document.getElementById("div2").style.width = "25%";
            a.innerHTML = "关闭边栏";
        }
    }
</script>

 

<div style="margin-left: 95%;" onclick="side(this)" ><a>关闭边栏</a></div><br />
<div id="div1"   style="float: left;width:75%;height:300px;background-color:#697896;word-break:break-all;">
    1111111111111111111111111111111111111111111111111111111111111111111111
</div>
<div id="div2"   style="float: left;width:25%;height:300px;background-color:#eeeeee;word-break:break-all;
word-wrap:break-word;" >
    <br />2222222222222222222222222
</div>

然后是第二个效果，就是点击后图片转换，载入网页时默认显示图片P1，点击一下变图片P2，再点击又变回P1，如此不断循环，（图P1为叉叉，图P2为圈圈）代码如下：
    <script language="javascript">
        function dowith() {
          
            var img = document.getElementById("img");
            if (img.src == "/images/2.gif") {
                img.src = "/images/1.gif";
             //   alert(img.src);
            }
            else {
                img.src = "/images/2.gif";
             //   alert(img.src);
            }
        }
    </script>

    <form name="form" action="" method="post">
    <button type="button" style="background: none; border: 0;" onclick="dowith();">
&n