CODEWITHSUNDEEP
javascripthtml
seb
seb

Reputation: 1

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 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>

Upvotes: 0

Views: 1258

Answers (2)

FarligOpptreden
FarligOpptreden

Reputation: 5043

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>

Upvotes: 0

KoolKabin
KoolKabin

Reputation: 17653

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>

Upvotes: 2

Related Questions