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

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?

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()"
           />

I'm guessing it's a problem with would is available to take the handler at the time of the over/out depending on how quickly flash switches visibility.

But the main problem here is you're doing it wrong.

You don't need 2 images, just have one image and change the source attribute:

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



    protected function logoutimg_mouseOverHandler(event:MouseEvent):void
{
    logoutimg.source="images/logoutover.jpg";
}


protected function logoutoverimg_mouseOutHandler(event:MouseEvent):void
{
    logoutimg.source="images/logout.jpg";
}

Edit: If you're seeing a flicker, try the embed syntax. You could also do it with Flex Css and hover attributes I think (no code required).

We've recently run into the same issue and the only real solution seems to be to replace the images with a Button and changing its up, down, over and disabled skins to embedded versions of the images.

If you just use mouseUp and mouseDown, the only problem you'll have is when the user clicks down on the image, then with the mouse still down, moves the mouse clearly away from the image. In this case, the image stays in the mouseDown version. To fix this, you also need to include a rollOut condition that reverts to the mouseUp image. Now, all bases are covered.