Flex 2 RolloverImage component
December 14th, 2006
I have created a very basic Flex 2 RolloverImage component that allows you to define the up, over, and down images through CSS.
Here is the guts of how to use the class:
XML:
-
<mx:Style>
-
.firstRollover {
-
upSkin: Embed(source="/assets/arrowGreenUp.png");
-
overSkin: Embed(source="/assets/arrowBlueUp.png");
-
downSkin: Embed(source="/assets/arrowBlueDown.png");
-
}
-
</mx:Style>
-
<renaun:RolloverImage
-
styleName="firstRollover"
-
click="mx.controls.Alert.show( 'click' );" />
-
<renaun:RolloverImage
-
upSkin="@Embed(source='/assets/arrowBlueUp.png')"
-
overSkin="@Embed(source='/assets/arrowBlueDown.png')"
-
downSkin="@Embed(source='/assets/arrowGreenUp.png')"
-
mouseDown="mx.controls.Alert.show( 'mouseDown' );" />
For a live example click here
, the source is available by right clicking on the component or you can find it here.
Entry Filed under: Adobe Flex, Rich Internet Applications
3 Comments Add your own
1. Bruce | 2006-12-15 at 8.20 am
Thanks for posting this component. I’ve downloaded your source code and everything works fine.
I’m trying to figure out how to create multiple different RolloverImage components in the same application. Your example shows one RolloverImage component tied to the Rollover style declaration.
How can I create another RolloverImage component with different graphics?
Thanks
2. Renaun Erickson | 2006-12-15 at 10.22 am
The example code in the post, live example, and the download have been updated to demonstrate how to use multiple RolloverImage’s properly. Sorry about that.
3. Bruce | 2006-12-15 at 4.34 pm
Thank you. I appreciate your work.
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed