Displaying a hand cursor when mousing over a Flex control

By Peter deHaan On November 18, 2007 · 21 Comments

I’ve seen this request come up a few times before in various mailing lists, forums and bug reports, so thought I’d do a brief post on it.

The following example shows how you can display a hand cursor when the user moves their mouse over an Image control in Flex by setting the useHandCursor property and buttonMode property to true, as seen in the following snippet:

<mx:Image source="image1.jpg" useHandCursor="true" buttonMode="true" />

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/18/displaying-a-hand-cursor-when-mousing-over-a-flex-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="useHandCursor:">
                <mx:CheckBox id="checkBox1" selected="true" />
            </mx:FormItem>
            <mx:FormItem label="buttonMode:">
                <mx:CheckBox id="checkBox2" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Image id="img"
            source="http://www.helpexamples.com/flash/images/image1.jpg"
            useHandCursor="{checkBox1.selected}"
            buttonMode="{checkBox2.selected}" />
 
</mx:Application>

View source is enabled in the following example.

Tagged with: buttonMode • useHandCursor

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

21 Responses to Displaying a hand cursor when mousing over a Flex control

judah says:

November 19, 2007 at 4:13 pm

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
D.Adrian says:

January 4, 2008 at 2:06 am

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 !!
Chew Pichai says:

January 6, 2008 at 7:19 pm

Hi,

If you want to set hand cursor in Label you must set mouseChildren=”false”
- AJ says:
  
  July 16, 2009 at 12:12 pm
  
  Chew, your comment made my life a lot easier. I wish LinkButton would wrap text, but your trick makes Text fields behave almost like LinkButtons. Sweet!
- Matt Ward says:
  
  December 13, 2009 at 12:52 am
  
  Ah just ran into the same thing and thanks to your comment I also turned a Text component into a button. Needed a multi-line linkbutton, but this trick with the text component worked wonders

gokul says:

January 23, 2008 at 9:30 pm

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

gokul says:

January 23, 2008 at 9:28 pm

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

July 18, 2008 at 12:22 pm

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..
```
<mx:Image id="test" source="image1.jpg" rollOver="test.source = 'image2.jpg'" rollOut="test.source='image1.jpg'" />
```
I would just use a button (and skin it) instead, but I can’t use embeded resources. Any ideas?

Thanks!

peterd says:

July 18, 2008 at 2:33 pm

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

Peter deHaan says:

July 18, 2008 at 3:30 pm

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

Filipe Torres says:

November 4, 2008 at 6:05 am

Hi,
it’s possible change Canvas backgroundColor and Label color properties using rollOver and rollOut events?
Thanks.
peterd says:

November 4, 2008 at 8:35 am

Filipe Torres,

Yes.

Peter
Jovica Aleksic says:

August 4, 2009 at 4:28 am

When you already have your mouse over a component with useHandCursor/buttonMode set to false, and you programmatically set useHandCursor/buttonMode to true, how do you revalidate the properties of the component, so that the hand cursor immediatly appears?

Without any revalidation, you must first move the cursor out of the component and then back in to see the hand cursor.

Example: Image can be clicked, then sends data to server and waits for response. It can only be clicked after it received the response.
Procedure: Image has hand cursor. On click, the hand cursor disappears and data is sent. The image has no hand cursor now. The response is received, the image may be clicked again, and shows a hand cursor. All without the user moving the cursor outside of the image area.

Thanks in advance.

Jovica Aleksic says:

August 4, 2009 at 4:30 am

Correction:
It seems, to see the hand cursor again, the user does not need to move the mouse out of the image and back in, but just to move it at all.
How can this be avoided?

Peter deHaan says:

August 4, 2009 at 7:11 am

@Jovica Aleksic,

In the following example I just set the buttonMode property and the mouse cursor changes immediately (and without me moving the mouse).

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        backgroundColor="white">
 
    <mx:Image id="img"
            source="http://helpexamples.com/flash/images/image2.jpg"
            buttonMode="true"
            useHandCursor="true"
            click="img.buttonMode = !img.buttonMode;"/>
 
</mx:Application>

Peter

Jovica Aleksic says:

August 4, 2009 at 7:26 am

You are absolute right, your example works fine.
Will investigate later.
santhosh says:

October 22, 2009 at 12:56 am

Thank you for these great examples….
Ronnie says:

May 14, 2010 at 2:34 am

Hi Peter,
I have a question for you. I have posted many qieries over here for. But unfortunately you haven’t rerplied to any. This query is of high importance to me and your help would be much appreciated.

I am draggin and dropping buttons(images are embedded on them) and dropping them on a canvas. Then if i click on any button on the canvas and hold it and move the mouse, a line is drawn connecting the button and the mouse. Now i have to connect the buttons if i leave my mouse on some other button. But i am not able to do so. If i leav the mouse on the canvas, a line is drawn. But if i leave it on any other button, a line is drawn from the first button to the origin of the canvas. What do i do to be able to identify the button when i drag my mouse over another button?
Seth says:

September 9, 2010 at 8:06 am

This is exactly what I was looking for… I love this blog! Thanks Peter!
Manfred says:

December 17, 2010 at 2:49 am

Your blog is alweays a great help, thanks Peter!
BrianOJee says:

October 3, 2011 at 2:33 am

Fantastic as usual Peter. Thanks