7 Replies Latest reply on Dec 1, 2011 10:19 AM by Flex harUI

    Setting bordercontainer backgroundimage from inside component

    adqsdfqsdf

      For my flex project I am making, I'm trying to change the background of my website change to the image I have clicked on. The background in my main page I have set like this:

       

          <s:BorderContainer id="backgroundContainer" width="100%" height="100%" backgroundImage="@Embed('assets/background.png')" borderAlpha="0">
                  
                  <s:layout>
                      <s:VerticalLayout horizontalAlign="center"/>
                  </s:layout>
                  
                  
              <mx:LinkBar styleName="mainnav" width="600" dataProvider="content" horizontalCenter="0" paddingLeft="20" paddingTop="125"/>
              
              <s:Image top="5" bottom="5" horizontalCenter="50" source="assets/nav.png"/>
                  
              <mx:ViewStack id="content">
                  
                  <mx:HBox id="home"
                           label="Home">
                      <component:home/>
                  </mx:HBox>
                  
                  <mx:HBox id="bio"
                           label="Bio">
                      <component:bio/>
                  </mx:HBox>
                  
                  <mx:HBox id="portfolio"
                           label="Portfolio">
                      <component:portfolio/>
                  </mx:HBox>
                  
                  <mx:HBox id="contact"
                           label="Contact">
                      <component:contact/>
                  </mx:HBox>
                  
              </mx:ViewStack>     
                  
              </s:BorderContainer>
      

      Now from inside my component, I am trying to set the the background of the image you click on.

       

         

      <fx:Script>
              <![CDATA[                
                  import mx.core.Application;
      
                  
              public function changeBackground(event:MouseEvent):void
              {
                  Application.application.backgroundContainer.setStyle('backgroundImage', img1.source);
              }
              ]]>
      
          </fx:Script>
      

      I call this function when you click on an image.

       

         

      <mx:Image id="img1" source="assets/placeholder.jpg" click="changeBackground(event)"/>
      

       

      But it doesn't work.

      So I was wondering how this should be done?

       

      Thank you,

      Thomas