Æliens

  <mx:Canvas 
          creationComplete="init()"
          buttonMode="true"
          backgroundImage="{upskin}"
          backgroundSize="100%"
          xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
  

          <mx:Script>
                  <![CDATA[
                            [Embed("mashup-rmx-05-CustomItemRendererExample-images-overskin.jpg")]
                            [Bindable]
                            private var overskin:Class;
          
                            [Embed("mashup-rmx-05-CustomItemRendererExample-images-upskin.jpg")]
                            [Bindable]
                            private var upskin:Class;
                          
  

                          private function init():void
                          {
                                  this.addEventListener(MouseEvent.ROLL_OVER, rollover);
                                  this.addEventListener(MouseEvent.ROLL_OUT, rollout);
                          }
                          
  

                          private function rollover(event:MouseEvent):void
                          {
                                  this.setStyle("backgroundImage", overskin);
                          }
                          
                          private function rollout(event:MouseEvent):void
                          {
                                  this.setStyle("backgroundImage", upskin);
                          }
                  ]]>
          </mx:Script>
  

          <!-- On this component I added selectable and enabled set to false, so that the buttonMode hand cursor shows through.
                  The disabled color then has to be set to the desired color -->
          <mx:Text text="{data}" selectable="false" enabled="false" disabledColor="#000000"/>
  </mx:Canvas>