Flex 2 RolloverImage component

Posted on December 14, 2006 | 3 comments

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:

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

Share the post "Flex 2 RolloverImage component"

  • http://www.brucephillips.name/blog Bruce

    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

  • http://www.renaun.com Renaun Erickson

    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.

  • http://www.brucephillips.name/blog Bruce

    Thank you. I appreciate your work.