Not signed in (Sign In)

Vanilla 1.0.3 is a product of Lussumo. More Information: Documentation, Community Support.

Background image showing

Bottom of Page

1 to 3 of 3

  1.  
    • CommentAuthorjrickards
    • CommentTimeNov 14th 2007
     
    I am designing a page behind a firewall so I can't show you what I have. As an example of other government ministries who have something similar, go to http://www.ene.gov.on.ca/en/index.php and note the flash banner image at the top. In some ministry sites, the banner has a link but ours will not, it will just have moving decorative images. Therefore, I don't need to have a message stating that the user must install or upgrade their flash plugin and instead, I want to have a static image (I have one screen-captured from the flash) as a background image to appear when the flash isn't available.

    Unfortunately, I can't get it to work for me: the background image, despite the fact that it's dimensions are the same as the flash, appear on the left and right sides of the animation.

    Does anyone have a solution whereby a background image, not just a color, may appear behind the flash and be visible when the flash is not available?

    TIA,

    Jules
    • CommentAuthorphilip
    • CommentTimeNov 14th 2007 edited
     
    you want the placeholder image to be removed when the SWF loads, right? there are two ways to do this:

    1. normally the image would go in the markup as alternate content and would be replaced by the SWF when it loads. this is the easiest solution.

    <div id="flash">
    <img src="myplaceholderimage.png" alt="you should always use alt tags!" />
    </div>


    2. you could alternately use CSS to set a background image for the div, as opposed to putting the image in your markup. this is cleaner in terms of markup, but takes more work.

    #flash {
    width: (width of SWF);
    height: (height of SWF);
    background: url("myplaceholderimage.png") no-repeat left;
    }


    then when the SWF loads, you have two options:
    1. if the SWF is big enough to cover the image, problem solved, leave it alone.
    2. if the SWF is smaller (or has transparency), you can use JS to remove the CSS background image when the SWF successfully loads

    var so = new SWFObject(... your code ...);
    if(so.write("flash")){
    document.getElementById("flash").style.backgroundImage = "none";
    }


    - philip
    • CommentAuthorjrickards
    • CommentTimeNov 14th 2007
     
    Perfect!!! Worked the first time (although I had to spend some time to figure out how to temporarily disable Flash player to test it).

    Many thanks,

    Jules

1 to 3 of 3

  1.