21 Replies Latest reply on Jun 27, 2010 10:13 PM by JaxNa

    How to add mouse Over on image?

    JaxNa Level 1

      hi guys,

       

      Can u help me plz.

       

      I have display 10 images. now i want mouse over heighlight on images. how i can do this? can u tell me?

       

       

      Thanks,

      JaxNa

        • 1. Re: How to add mouse Over on image?
          BhaskerChari Level 4

          Hi Jaxna,

           

          on mouseOver and mouseOut try to change the alpha property of the image...

          <mx:Image id="myImage" source="assets/image.jpg" alpha="0.7" mouseOver="myImage.setStyle('alpha',1)" mouseOut="myImage.setStyle('alpha',0.7)"/>

           

           

           

          If this post answers your question or helps, please kindly mark it as such.


          Thanks,

          Bhasker Chari

          • 2. Re: How to add mouse Over on image?
            JaxNa Level 1

            Hi Bhaskar Chari

             

            Can u tell me plz where i can add this code?

             

            The follwoing code is in Mxml file

             

            <?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"
                           minWidth="1024" minHeight="768"
                           xmlns:components="components.*">
                  
                <s:layout>
                    <s:VerticalLayout/>
                </s:layout>
                
                <s:Label text="Mobile Directory"
                         color="#1558E1"
                         fontSize="31"
                         fontStyle="normal"
                         fontWeight="normal" paddingLeft="100" paddingBottom="0" width="640" height="46"/>
               
                    <s:Group id="mobileGroup"
                         height="569" width="956">
                   
                   
                    <s:layout>
                        <s:TileLayout/>
                    </s:layout>
                   
                    <components:mobileDisplay mobileImage="images/X10_52x104.jpg"
                                                mobileName="XperiaTMX10"
                                                width="86" height="112"
                    />
                    <components:mobileDisplay mobileImage="images/W350_52x104.jpg"
                                                mobileName="W350a"
                                                width="86" height="205"
                    />
                    <components:mobileDisplay mobileImage="images/W760_52x104.jpg"
                                                mobileName="W760a"
                                                width="86" height="112"
                    />
                    <components:mobileDisplay mobileImage="images/W580i_52x104.jpg"
                                                mobileName="W580i"
                                                width="184" height="207"
                    />
                    <components:mobileDisplay mobileImage="images/T715_52x104.jpg"
                                                mobileName="T715"
                                                width="86" height="112"
                    />
                    <components:mobileDisplay mobileImage="images/TM506_52x104.jpg"
                                                mobileName="TM506"
                                                width="86" height="112"
                    />
                    <components:mobileDisplay mobileImage="images/W380_52x104.jpg"
                                                mobileName="W380a"
                                                width="86" height="112"
                    />
                    <components:mobileDisplay mobileImage="images/W705_52x104.jpg"
                                                mobileName="W705a"
                                                width="86" height="112"
                    />
                    <components:mobileDisplay mobileImage="images/X1_52x104.jpg"
                                                mobileName="XperiaTMXla"
                                                width="86" height="112"
                    />
                    <components:mobileDisplay mobileImage="images/T303_52x104.jpg"
                                                mobileName="T303"
                                                width="86" height="112"
                    />
                   
              
                                   
                </s:Group>
               
            </s:Application>

             

             

            Thanks for replaying me

            • 3. Re: How to add mouse Over on image?
              rootsounds Level 4

              It depends on your custom mobileDisplay class. If it has a mouseOver event already, then use it.

               

              If it does not have a mouseOver event of its own you will have to add a listener to the Image contained within it. You can either expose a function or property to pass through a handler function to use or add a mouseOver event to mobileDisplay that gets dispatched by the Image's mouseOver.

              • 4. Re: How to add mouse Over on image?
                BhaskerChari Level 4

                Hi Jaxna,

                 

                In your <components:mobileDisplay/> component you might be  having a <mx:Image /> control try to put the below events for that image control.

                 

                mouseOver="myImage.setStyle('alpha',1)" mouseOut="myImage.setStyle('alpha',0.7)"/

                 

                Thanks,

                Bhasker Chari

                • 5. Re: How to add mouse Over on image?
                  JaxNa Level 1

                  Hi Bhaskar,

                   

                  its not working  Bhaskar.

                  can u add in this my code?

                   

                  Thanks a lot dear for giving me replay

                  • 6. Re: How to add mouse Over on image?
                    BhaskerChari Level 4

                    Hi Jaxna,

                     

                    <components:mobileDisplay  />

                     

                    Dear then try to post the code in your mobileDisplay component file...

                     

                     

                    Thanks,

                    Bhasker Chari

                     

                     


                    • 9. Re: How to add mouse Over on image?
                      JaxNa Level 1

                      till its not working dear..

                       

                       

                       

                      here is my mobieDisplay componenet


                      <?xml version="1.0" encoding="utf-8"?>
                      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
                               xmlns:s="library://ns.adobe.com/flex/spark"
                               xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
                          <s:layout>
                              <s:VerticalLayout horizontalAlign="center"/>
                          </s:layout>
                         
                         
                          <fx:Script>
                              <![CDATA[
                                 
                             
                                  [Bindable]
                                  public var mobileImage:String;
                                 
                                  [Bindable]
                                  public var mobileName:String;
                                 
                                 
                              ]]>
                          </fx:Script>
                         
                         
                          <mx:Image source="{mobileImage}" />
                         
                          <s:Label text="{mobileName}"
                                   fontFamily="Courier New"
                                   fontSize="15"
                                   fontWeight="bold"
                                   textAlign="center"
                                   width="200"/>
                         
                      </s:Group>

                       

                      Thanks for replaying me dear..

                      • 10. Re: How to add mouse Over on image?
                        BhaskerChari Level 4

                        Hi Jaxna,

                         

                        Please replace the Image control in your mobieDisplay component with the following one:

                         

                        <mx:Image id="myImage" source="{mobileImage}" alpha="0.7" mouseOver="myImage.setStyle('alpha',1)" mouseOut="myImage.setStyle('alpha',0.7)"/>

                         

                         

                        If this post answers your question or helps, please kindly mark it as such.


                        Thanks,

                        Bhasker Chari

                        • 11. Re: How to add mouse Over on image?
                          JaxNa Level 1

                          Hi Bhaskar Chari

                           

                          Sorry dear i am distrubing you.

                          this images are already display in alpha. its not on mouseOver And mouseOut.

                          mobile_display.JPG

                           

                          Thanks Dear..

                          • 12. Re: How to add mouse Over on image?
                            BhaskerChari Level 4

                            Hi Jaxna,

                             

                            If you are using a Flex TileList control for displaying the mobile image gallery then you can set the rollOverColor property on the TileList to get the highlighting.

                             

                            If you are not using the TileList then try to use this in your mobile display component:

                             

                            <mx:Image id="myImage" source="{mobileImage}" mouseOver="this.setStyle('backgroundColor,'#09729e')"  mouseOver="this.setStyle('backgroundColor,'#FFFFFF')" />Thanks,

                             

                            Bhasker Chari

                            • 13. Re: How to add mouse Over on image?
                              JaxNa Level 1

                              Hi Bhaskar,

                               

                              ya Bhaskar I am using Tile List control for display Mobile Image

                               

                              I set the rollOverColor property

                               

                              <mx:Image id="myImage" source="{mobileImage}"
                                     
                                           rollOverColor="this.setStyle('backgroundColor,'#09729e')"
                                           rollOutColor="this.setStyle('backgroundColor,'#FFFFFF')"/>

                               

                               

                              but giving this error.
                              Cannot resolve attribute 'rollOutColor' for component type mx.controls.Image.    mobileDisplay.mxml    /sony/src/components    line 64    Flex Problem.

                               

                              I am very irreted person??

                              If you are interested then replay me otherwise thanks alot Bhaskar for your help and cheers for me..

                               

                               

                              Thanks,

                              JaxNa

                              • 14. Re: How to add mouse Over on image?
                                BhaskerChari Level 4

                                Hi Jaxna,

                                 

                                In my previous post I have given you two sloutions ...

                                 

                                one is to use rollOverColor property if you are using TileList control..

                                 

                                Another one is to use if you are not using the TileList control....

                                 

                                 

                                But you have clubbed both the solutions in your code.....

                                 

                                More over rollOverColor is not an event, it is a property and there is no property or event called rollOutColor ...

                                 

                                For rollOverColor you should give the color thats it....

                                 

                                So just include rollOverColor="#09729e" in your TileList...thats it...no need to make any changes...

                                 

                                <mx:TileList rollOverColor="#09729e" />

                                 

                                 

                                Thanks,

                                Bhasker Chari

                                • 15. Re: How to add mouse Over on image?
                                  JaxNa Level 1

                                  Hi Bhaskar,

                                   

                                  Tile List and Tile Layout are same?

                                   

                                   

                                  Thanks,

                                  JaxNa

                                  • 16. Re: How to add mouse Over on image?
                                    BhaskerChari Level 4

                                    Hi Jaxna,

                                     

                                    You simply replace the image control with the below Image control in your mobiledisplay  component...

                                     

                                    <mx:Image id="myImage" source="{mobileImage}" mouseOver="this.setStyle('backgroundColor,'#09729e')"  mouseOut="this.setStyle('backgroundColor,'#FFFFFF')" />

                                     

                                    Hope this time you make the chnages correctly...

                                     

                                    Thanks,

                                    Bhasker Chari

                                     

                                    Message was edited by: BhaskerChari

                                    • 17. Re: How to add mouse Over on image?
                                      JaxNa Level 1

                                      Hi Bhaskar,

                                       

                                      But dear when i replace this code in my Mobile Display Component

                                       

                                      <mx:Image id="myImage" source="{mobileImage}"

                                      mouseOver="this.setStyle('backgroundColor,'#09729e')"

                                      mouseOver="this.setStyle('backgroundColor,'#FFFFFF')" />

                                       

                                      that time i got this error


                                      Attribute "mouseOver" was already specified for element "mx:Image".    mobileDisplay.mxml    /sony/src/components    line 62    Flex Problem

                                       

                                       

                                      Sorry dear

                                       

                                      Thanks,

                                      JaxNa

                                      • 18. Re: How to add mouse Over on image?
                                        David_F57 Level 5

                                        hi,

                                         

                                        Your whole structure is wrong,

                                         

                                        first you should use either a datagroup or a tilelist, you then automatically get hover background color. As you have a the layout control you are using, your image would need to be placed into a container that is slightly larger than the image and you would use the image mouseenter event to set the containers background and mouseout event to reset the containers background.

                                         

                                        But you need to start again and address bestpractises, you should use the correct components for the job, in your case that is a datagroup or tilelist

                                         

                                        this is how you should display a group of images

                                         

                                        http://flashhub.net/filter/   -- source included.

                                         

                                         

                                        David.

                                        • 19. Re: How to add mouse Over on image?
                                          Peter deHaan Level 4

                                          I agree with David. I'd probably use something like David's solution or a Spark List w/ a custom item renderer:

                                           

                                          <?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">
                                              <s:layout>
                                                  <s:VerticalLayout/>
                                              </s:layout>
                                          
                                              <s:Label text="Mobile Directory" 
                                                       color="#1558E1" 
                                                       fontSize="31" 
                                                       fontStyle="normal" 
                                                       fontWeight="normal" paddingLeft="100" paddingBottom="0" width="640" height="46"/>
                                          
                                              <s:List id="mobileGroup"
                                                      itemRenderer="MobileDisplayItemRenderer"
                                                      height="569" width="956">
                                                  <s:dataProvider>
                                                      <s:ArrayList>
                                                          <fx:Object mobileImage="http://helpexamples.com/flash/images/image1.jpg" 
                                                                     mobileName="XperiaTMX10" />
                                                          <fx:Object mobileImage="http://helpexamples.com/flash/images/image2.jpg" 
                                                                     mobileName="W350a" />
                                                          <fx:Object mobileImage="http://helpexamples.com/flash/images/image3.jpg" 
                                                                     mobileName="W760a" />
                                                      </s:ArrayList>
                                                  </s:dataProvider>
                                                  <s:layout>
                                                      <s:TileLayout requestedRowCount="2" requestedColumnCount="2"/>
                                                  </s:layout>
                                              </s:List>
                                          
                                          </s:Application>
                                          

                                           

                                           

                                           

                                           

                                          <?xml version="1.0" encoding="utf-8"?>
                                          <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                                          xmlns:s="library://ns.adobe.com/flex/spark"
                                                          xmlns:mx="library://ns.adobe.com/flex/mx"
                                                          autoDrawBackground="true"
                                                          dataChange="dataChangeHandler(event);"
                                                          alpha="1.0"
                                                          alpha.normal="0.7">
                                              <s:layout>
                                                  <s:VerticalLayout horizontalAlign="center" />
                                              </s:layout>
                                              <s:states>
                                                  <s:State name="normal" />
                                                  <s:State name="hovered" />
                                                  <s:State name="selected" />
                                              </s:states>
                                          
                                              <fx:Script>
                                                  <![CDATA[
                                                      protected function dataChangeHandler(evt:Event):void {
                                                          img.source = data.mobileImage;
                                                          lbl.text = data.mobileName;
                                                      }
                                                  ]]>
                                              </fx:Script>
                                          
                                              <mx:Image id="img" width="200" height="133" />
                                          
                                              <s:Label id="lbl"
                                                       fontFamily="Courier New"
                                                       fontSize="15"
                                                       fontWeight="bold" 
                                                       textAlign="center" 
                                                       width="200"/>
                                          
                                          </s:ItemRenderer>
                                          
                                          Peter

                                          • 20. Re: How to add mouse Over on image?
                                            JaxNa Level 1

                                            hi Peter,

                                             

                                            Thanks peter for replaying me.

                                             

                                            Can you tell me one thing?

                                             

                                            your first code is a Mxml file? and second code is renderer component?

                                             

                                            I got this error

                                             


                                            1120: Access of undefined property MobileDisplayItemRenderer.    Test.mxml    /Test/src    line 15    Flex Problem


                                            1172: Definition MobileDisplayItemRenderer could not be found.    Test.mxml    /Test/src    line 15    Flex Problem

                                             

                                             

                                            Can you tell me plz where i made mistek?

                                             

                                             

                                            Thanks,

                                            JaxNa

                                            • 21. Re: How to add mouse Over on image?
                                              JaxNa Level 1

                                              thanks alot peter