CODEWITHSUNDEEP
apache-fleximagemouseovermouseout
JMira
JMira

Reputation: 888

Flex image mouse over

I have the next code that show a image and when mouse is over change it.

  <mx:Image source="{ConfigApp.getResourcesPath()}/img.jpg" id="imgOne"   
  mouseOver="imgOne.source=ConfigApp.getResourcesPath()+'/img_over.jpg'"
  mouseOut="imgOne.source=ConfigApp.getResourcesPath()+'/img.jpg'"/>

I have 2 problems:

1st: If I pass fast with the mouse over the image, some times the image state with mouseOver image (don't detect the mouseOut event).

2nd: In the moment that mouse is over there are a few miliseconds when the aren't any image, so its looks like a white flash every time that mouse is over.

Upvotes: 0

Views: 2076

Answers (2)

moropus
moropus

Reputation: 3782

I'd rather make something like this, it solves all the problems:

[Bindable] public var isOurMouse:Boolean = false;

<mx:Canvas>
    <mx:Image source="{ConfigApp.getResourcesPath()}/img.jpg"
        mouseOver="isOurMouse = true"
        mouseOut="isOurMouse = false"/>
    <mx:Image source="{ConfigApp.getResourcesPath()}/img_over.jpg"
        mouseEnabled="false" mouseChildren="false"
        visible="{isOurMouse}"/>
</mx:Canvas>

To the point, if you want your image not to blick on reload, you should have two images, one on another, where background one reloads only after the foreground one has completed loading. Actually, your image blicks, but you don't see it:

<mx:Canvas>
    <mx:Image id="imgBkg"/>
    <mx:Image id="imgFrg"
        source="{something}"
        complete="imgBkg.source = imgFrg.source"/>
</mx:Canvas>

Upvotes: 1

SuperSaiyen
SuperSaiyen

Reputation: 1410

2nd issue: Its loading the image each time, this flash will get worse when on a remote connection. instead, cahce the image in a class and switch the class reference.

[Embed(source="/assets/imageOver.png")]
public static const overImage:Class;
[Embed(source="/assets/img.png")]
public static const image:Class;

Then switch them like this...

<mx:Image source="{image}" id="imgOne"   
  mouseOver="imgOne.source=overImage"
  mouseOut="imgOne.source=image"/>

Upvotes: 4

Related Questions