managing mousever and mouseclick events

I am trying to do something quite simple. I have an image with a rollover. When it is clicked the onmouseout and onmouseover开发者_如何学Python events are removed and the image is swaped. Up to here I got it but now I would like to add something so that when it is clicked again everything returns to the original state (swap the image again and activate onmouseover and onmouseout.

Here is the code I got so far:

<a href="#" 
            onMouseOut="MM_swapImgRestore();
            " 
            onMouseOver="MM_swapImage('image','','images/image-2.jpg',1)" 
            onClick="
                MM_swapImage('image','','images/image-3.jpg',1); 
                this.onmouseover=null;
                this.onmouseout=null;
                     "
>
<img name="image" src="images/image-1.jpg" id="rond9"></a>

for my quite easy solution i would add a flag and check it before firing the mouseover and mouseout events as it it remove the unnecessary burden of attaching and detaching of events.

i.e like:

<script>var myFlag=true;</script>
<a href="#" 
            onMouseOut="if(myFlag === true){MM_swapImgRestore();}" 
            onMouseOver="if(myFlag === true){MM_swapImage('image','','images/image-2.jpg',1);}" 
            onClick="MM_swapImage('image','','images/image-3.jpg',1); 
                myFlag = !myFlag;"
>
<img name="image" src="images/image-1.jpg" id="rond9"></a>

Seeing as this was generated by a WYSIWYG editor (presumably DreamWeaver), I won't suggest a jQuery implementation, but rather something that would work without referencing jQuery. You could possibly try something like:

<script type="text/javascript">
var removeEvents = true;
function EventAttach(anchor) {
  MM_swapImage('image','','images/image-3.jpg',1); 
  anchor.onmouseover = removeEvents ? null : new function() { MM_swapImage('image','','images/image-2.jpg',1) };
  anchor.onmouseout = removeEvents ? null : new function() { MM_swapImgRestore(); };
  removeEvents = !removeEvents;
}
</script>
<a href="#" 
  onMouseOut="MM_swapImgRestore();" 
  onMouseOver="MM_swapImage('image','','images/image-2.jpg',1)" 
  onClick="EventAttach(this);"
>
<img name="image" src="images/image-1.jpg" id="rond9"></a>