4 Replies Latest reply on Dec 4, 2009 2:33 AM by flx23

    Applying skin instead of rollovercolor in TileList

    flx23 Level 1

      hi All

       

      Normally when we hover items in a tilelist or list we see a default rollovercolor thats blue..if we wan to change it we set the rollovercolor property what if we want to apply a skin istead of that color ..

       

      i am trying to apply a skin on item rollover containing image with curved border ..i used the css for this which looks like this

       

      .rollstyle
           {
           
              item-over-skin:Embed(source="Assets/rollskin.png");

       

           }

       

      and set the stylename for tilelist to stylename="rollstyle" but i am unable to see a effect while i rollover the tilelist items..it shows the same default blue color on rollover

        • 1. Re: Applying skin instead of rollovercolor in TileList
          Subeesh Arakkan Level 4

          Hi,

           

          I think itemOverSkin is not available for TileList. You can set it in the itemrenderer manually by listening for the rollover and rollout events. In rollover event handler, set stylename= rollOverstyle and in the rollout handler, set stylename=rollOutStyle

           

          .rollOverStyle
          {
               background-skin:Embed(source="Assets/rollskin.png");
          }

          • 2. Re: Applying skin instead of rollovercolor in TileList
            flx23 Level 1

            Hi subeesh

             

            Thanks again for your reply..i have applied the style in itemrenderer but not working ..am i doing smthing wrong

             

            here is the code

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Canvas creationComplete="init()"  xmlns:mx="http://www.adobe.com/2006/mxml" >
            <mx:Style>
                .rollOverStyle
            {
                 background-skin:Embed(source="Assets/rollskin.png");
            }
            </mx:Style>
            <mx:Script>
                <![CDATA[
                   
                     private function init():void
                     {
                         this.addEventListener(MouseEvent.ROLL_OVER,Showeffect);
                     }
                     private function Showeffect(evnt:Event):void
                     {
                         this.styleName="rollOverStyle";
                     }
                    
                ]]>
            </mx:Script>
            <mx:HBox horizontalGap="0">
            <mx:Spacer width="4"/>
                
            <mx:Image  source="{data}"/>
            </mx:HBox>
                   
                   
            </mx:Canvas>

            • 3. Re: Applying skin instead of rollovercolor in TileList
              Subeesh Arakkan Level 4

              Hi,

               

              Use borderSkin instead of backgroundSkin

               

               border-skin:Embed(source="Assets/rollskin.png");

               

              and invalidate style

               

               private function Showeffect(evnt:Event):void
               {
                   this.styleName="rollOverStyle";
                   styleChanged("borderSkin");
               }      
              
              • 4. Re: Applying skin instead of rollovercolor in TileList
                flx23 Level 1

                Yes it worked

                i also tried with backgroundimage and giving background size to 100% before this..it works fine by applying both the styles..

                 

                 

                thanks for your help buddy..