5 Replies Latest reply on Dec 27, 2010 2:16 AM by Flex Rock

    Change images dynamically in Repeater

    Flex Rock Level 1

      Hi,

       

                I have an image control inside repeater.  I need to change the images dynmically during mouseover and mouseout.

       

      Regards,

      Jayagopal.

        • 1. Re: Change images dynamically in Repeater
          flex2008 Level 3

          Listen for image's mouseOver and mouseOut events and change the source in their handlers.

          • 2. Re: Change images dynamically in Repeater
            Flex Rock Level 1

            Here is my sample code .

             

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()" width="100%" height="100%">
                <fx:Declarations>
                    <!-- Place non-visual elements (e.g., services, value objects) here -->
                    <fx:Array id="arsImage">
                        <fx:Object label="@Embed(source='Images/images.jpg')"/>
                        <fx:Object label="@Embed(source='Images/images1.jpg')"/>
                        <fx:Object label="@Embed(source='Images/images2.jpg')"/>
                        <fx:Object label="@Embed(source='Images/images4.jpg')"/>
                        <fx:Object label="@Embed(source='Images/images5.jpg')"/>
                        <fx:Object label="@Embed(source='Images/images6.jpg')"/>
                        <fx:Object label="@Embed(source='Images/images7.jpg')"/>
                        <fx:Object label="@Embed(source='Images/images8.jpg')"/>
                        <fx:Object label="@Embed(source='Images/images9.jpg')"/>
                        <fx:Object label="@Embed(source='Images/images10.jpg')"/>
                        <fx:Object label="@Embed(source='Images/images11.jpg')"/>
                        <fx:Object label="@Embed(source='Images/images12.jpg')"/>
                    </fx:Array>
                </fx:Declarations>
                <fx:Script>
                    <![CDATA[
                       
                        private var mouseOverindex:int=0;
                        private function init():void
                        {
                            imgSource.source=arsImage[0].label;
                        }
                        private function onMouseOver(event:Event):void
                        {
                            var localIndex:int=arsImage.length-1;
                            imgSource[rxImage.currentItem].source=arsImage[mouseOverindex+1].label;
                            mouseOverindex+=1;
                            if(localIndex == mouseOverindex)
                            {
                                mouseOverindex=0;
                            }
                        }
                        private function  onMouseOut(event:Event):void
                        {
                            imgSource.source=arsImage[0].label;
                        }
                    ]]>
                </fx:Script>
                <mx:HBox>
                    <mx:VBox horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
                        <mx:Repeater id="rxImage" dataProvider="{arsImage}">
                            <mx:Image  id="imgSource" source="{rxImage.currentItem.label}" x="182" y="146"
                            mouseOver="onMouseOver(event)" mouseOut="onMouseOut(event)">
                            </mx:Image>   
                        </mx:Repeater>
                    </mx:VBox>   
                </mx:HBox>
            </s:Application>

             

            But it is not getting updated.

             

            Thanks

            Jayagopal.

            • 3. Re: Change images dynamically in Repeater
              flex2008 Level 3

              I assume for each image,you have a separate "over" image also.If so I would use this approach:

               

                       <fx:Array id="arsImage">
                          <fx:Object label="@Embed(source='Images/images.jpg')" label1="@Embed(source='Images/images_over.jpg')"/>
                          <fx:Object label="@Embed(source='Images/images1.jpg')" label1="@Embed(source='Images/images1_over.jpg')"/>
                         </fx:Array>
              

               

                        private function onMouseOver(event:Event):void
                          {
                              var image:Image = event.currentTarget as Image;
                              image.source = image.getRepeaterItem().label1;
                          }
                          private function  onMouseOut(event:Event):void
                          {
                              var image:Image = event.currentTarget as Image;
                              image.source = image.getRepeaterItem().label;
                          }

               

              Let me know if that helps

              • 4. Re: Change images dynamically in Repeater
                BhaskerChari Level 4

                HI Jayagopal,

                 

                Just replace these below two functions in your code...

                 

                You are accessing the rxImage.currentItem which is not available after the Repeater has completed looping through the items. However if you want to get the details of the item clicked you can make use of the getRepeaterItem() function in conjunction with the current target.

                 

                var currRepItem:Object = event.currentTaget.getRepeaterItem();

                 

                 

                private function onMouseOver(event:MouseEvent):void
                            {
                                var localIndex:int=arsImage.length-1;
                                var currItem:int = event.currentTarget.getRepeaterIndex();
                                //imgSource[rxImage.currentItem].source = arsImage[mouseOverindex+1].label;
                                var imgSource:Image = event.currentTarget as Image;
                                imgSource.source = arsImage[mouseOverindex+1].label;
                                mouseOverindex += 1;
                                if(localIndex == mouseOverindex)
                                {
                                    mouseOverindex=0;
                                }
                            }
                            private function  onMouseOut(event:MouseEvent):void
                            {
                             var imgSource:Image = event.currentTarget as Image;
                                imgSource.source=arsImage[0].label;
                            }

                 

                 

                Thanks,

                Bhasker

                • 5. Re: Change images dynamically in Repeater
                  Flex Rock Level 1

                  Thanks Bhasker, that is what i am expecting.

                   

                  Thanks & Regards,

                  Jayagopal.