Displaying a hand cursor when mousing over a Flex control

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.

21 thoughts on “Displaying a hand cursor when mousing over a Flex control

  1. 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

  2. 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 !!

    1. 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!

    2. 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

  3. 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!

  4. 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

  5. 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

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

  7. 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.

  8. 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?

    1. @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

  9. 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?

Comments are closed.