Products

Products
Viewing By Entry / Main
April 18, 2006

Clickable images in Flex 1.5

Posted At : 5:40 AM | Posted By : clint317
Related Categories: Flex/Flash/AS3
Far too long I haven't put anything in my blog and today it changes. I'll put anything useful in here when I come upon it and try to grow it like I envisioned from the beginning. So expect a lot of little tid bits from small things you already know to bigger or lesser known things.

Try as you may to use 'click' attribute in the mx:Image tag and it will not work. Then how do you make the image 'clickable'? First use a Canvas the size of your image, then put in a Link the same size with no label, then put in your image. Give the link the 'click' action to take.

<mx:Canvas width="727" height="595">
<mx:Link id="homeImageLink" width="727" height="595" click="_level0.fedexchangeViewStack.selectedIndex = 1;" />
<mx:Image source="@Embed('images/fedex_home_draft.jpg')" id="homeImage" width="727" height="595"
showEffect="fadeInEffect"
visible="false"
creationComplete="homeImage.visible=true"
mouseOver="event.target.useHandCursor=true;" />
</mx:Canvas>

I also included the code to give your image a hand.

Comments (2) | Print | del.icio.us | Linking Blogs

Comments

Does the Image really need the useHandCursor statement? Seems like the Link already takes care of that. Setting it to false still gives me the hand.

Great solution, but shocking to understand such trick is necessary for such common web functionality!! :(

Posted By Ruud / Posted At 8/25/06 10:18 AM

<mx:Image source="@Embed('images/fedex_home_draft.jpg')" useHandCursor="true" buttonMode="true" click="_level0.fedexchangeViewStack.selectedIndex = 1;" />

Posted By Joshua / Posted At 6/9/08 10:37 AM


Copyright © 2005-2006 Clint Willard. All rights reserved.
Aura skin for Clint Willard's BlogCFC inspired by Brooks Bilson's Bolg.
All trademarks property of their owners.