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