18
Nov
07

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.

View MXML

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


8 Responses to “Displaying a hand cursor when mousing over a Flex control”


  1. 1 judah Nov 19th, 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

  2. 2 D.Adrian Jan 4th, 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 !!

  3. 3 Chew Pichai Jan 6th, 2008 at 7:19 pm

    Hi,

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

  4. 4 gokul Jan 23rd, 2008 at 9:28 pm

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

  5. 5 gokul Jan 23rd, 2008 at 9:30 pm
    mouseOver="event.target.onRelease=null;event.target.useHandCursor=true;"
    
  6. 6 Ned Jul 18th, 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!

  7. 7 peterd Jul 18th, 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

  8. 8 peterd Jul 18th, 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

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".