Flex 4 change image on mouseover – mouseout function fails when I mouseover quickly

apache-fleximagemouseover

I have a basic mouseover in my flex application which changes an image onmouseover and changes it back onmouseout using the code mouseOver="functionToChangeImageSource()" and another one to mouseout.

It works fine when you slowly mouse over and out, however if I quickly move the mouse over it, it occasionally stays on the mouseover image and the mouseout function doesnt appear to kick in. Is there anything I can do to fix this, or does anyone have any ideas why its happening?

Also, I've tried the rollOver and rollOut instead but it has the same problem.

Code is as follows (I switched it to hide and show the two images on mouseover/out to see if it solved the problem but it didnt):

        <mx:Image source="images/logout.jpg"  
              left="0"
              top="350"
              top.dataViewState="470"
              id="logoutimg"
              includeIn="dataViewState, dataDayViewState" 
              rollOver="logoutimg_mouseOverHandler(event)"
              click="doLogout()"
               />

    <mx:Image source="images/logoutover.jpg"  
              left="0"
              top="350"
              top.dataViewState="470"
              id="logoutoverimg"
              includeIn="dataViewState, dataDayViewState" 
              rollOut="logoutoverimg_mouseOutHandler(event)"
              visible="false"
              click="doLogout()" />

And the functions are as follows:

protected function logoutimg_mouseOverHandler(event:MouseEvent):void
        {
            logoutimg.visible = false;
            logoutoverimg.visible = true;
        }


        protected function logoutoverimg_mouseOutHandler(event:MouseEvent):void
        {
            logoutoverimg.visible = false;
            logoutimg.visible = true;
        }

I'd imagine you're correct about the mouseover event not completing before mouseout is but how to I fix this?

Best Answer

You'd better use this one line code

    <mx:Image source="images/logout.jpg"  
          left="0"
          top="350"
          top.dataViewState="470"
          id="logoutimg"
          includeIn="dataViewState, dataDayViewState" 
          rollOver="event.currentTarget.source = 'images/logoutover.jpg'" 
          rollOut="event.currentTarget.source = 'images/logout.jpg'"
          click="doLogout()"
           />
Related Topic