Comments on: Displaying a hand cursor when mousing over a Flex control

By: peterd

peterd — Fri, 18 Jul 2008 22:30:12 +0000

Actually, setting the rollOver and rollOut on the Canvas is better. Here's a better example which adds some effects when the top image is shown or hidden:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Canvas id="canvas"
                rollOver="rollOverImage.visible = true;"
                rollOut="rollOverImage.visible = false;">
        <mx:Image id="rollOutImage"
                source="image1.jpg" />
        <mx:Image id="rollOverImage"
                source="image2.jpg"
                visible="false"
                showEffect="Fade"
                hideEffect="Zoom" />
    </mx:Canvas>

</mx:Application>

Peter

By: peterd

peterd — Fri, 18 Jul 2008 21:33:02 +0000

Ned, There are probably a few different techniques you can use, but you may have to embed the images for this to work. I think what is happening in your example is that when the image is rolled over, the existing image disappears when the new image is loaded. I *think* this would cause the rollOut event to get dispatched causing the first image to try and load again, putting it into a flickering loop. Try this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed("image1.jpg")]
            private var img1:Class;

            [Bindable]
            [Embed("image2.jpg")]
            private var img2:Class;
        ]]>
    </mx:Script>

    <mx:Image id="image"
            source="{img1}"
            rollOver="image.source=img2;"
            rollOut="image.source=img1;" />

</mx:Application>

Another example may be to load both images at once, stack them on top of each other and toggle the topmost image's visible property:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Canvas>
        <mx:Image id="rollOutImage"
                source="image1.jpg"
                rollOver="rollOverImage.visible = true;"  />
        <mx:Image id="rollOverImage"
                source="image2.jpg"
                visible="false"
                rollOut="rollOverImage.visible = false;" />
    </mx:Canvas>

</mx:Application>

Happy Flexing! Peter

By: Ned

Ned — Fri, 18 Jul 2008 19:22:04 +0000

Is it possible to replace the image source on rollover to another image? When I tried the following, the image would just sit there and flicker when the mouse was over it..

I would just use a button (and skin it) instead, but I can’t use embeded resources. Any ideas?

Thanks!

By: gokul

gokul — Thu, 24 Jan 2008 05:28:14 +0000

Try this app it will be helpful for you to set hand cursor over any component

By: gokul

gokul — Thu, 24 Jan 2008 04:30:27 +0000

mouseOver="event.target.onRelease=null;event.target.useHandCursor=true;"

By: Chew Pichai

Chew Pichai — Mon, 07 Jan 2008 03:19:38 +0000

Hi,

If you want to set hand cursor in Label you must set mouseChildren=”false”

By: D.Adrian

D.Adrian — Fri, 04 Jan 2008 10:06:45 +0000

Hi,

What if I would want to have the hand cursor when I roll over a UITextField component (like Labal) ?
In my case, I am creating a custom item renderer for the Tree component and right now I cannot use the hand cursor over the text.
Any help would be much appreciated !!

By: judah

judah — Mon, 19 Nov 2007 23:13:52 +0000

In this example it seems you don’t need to set useHandCursor. For example, uncheck useHandCursor. As long as you have buttonMode true it is always showing a hand cursor. Win XP FF2.0.0.9