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.
{ 17 comments… read them below or add one }
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
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 !!
Hi,
If you want to set hand cursor in Label you must set mouseChildren=”false”
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!
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
Try this app it will be helpful for you to set hand cursor over any component
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!
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
rollOutevent 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
visibleproperty:<?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
Actually, setting the
rollOverandrollOuton the Canvas is better. Here’s a better example which adds some effects when the top image is shown or hidden:Peter
Hi,
it’s possible change Canvas backgroundColor and Label color properties using rollOver and rollOut events?
Thanks.
Filipe Torres,
Yes.
Peter
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.
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?
@Jovica Aleksic,
In the following example I just set the
buttonModeproperty and the mouse cursor changes immediately (and without me moving the mouse).Peter
You are absolute right, your example works fine.
Will investigate later.
Thank you for these great examples….