Display image above flash object

Question

I am facing a tricky situation here...this is the problem...
I have a flash object over which i want to display an image
These are the tricks that i tried...
1.Playing with z-index(no use)
2.Setting the wmode parameter to transparent/opaque(again no use)
3.Using javascript and displaying image only after the page is loaded(still no use)
I tried googling but found no solutions..:(
Thanks in advance

Update-the code i am using

        <div style="position:absolute; top:0px; z-index:-2000;">
            <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="176" height="146">
                <param name="movie" value="/Images/WordOfLife.swf" />
                <param name="wmode" value="transparent" />
                <param name="quality" value="High" />
                <param name="menu" value="false" />
                <embed src="/Images/WordOfLife.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" menu="false" width="176" height="146" />
            </object>
        </div>
        <div style="position:absolute; top:0px; z-index:2000;">
            <img src="Logo.gif" alt="" />
        </div>

also tried with value="opaque"
have done all possible suggestions...pls help..

Answer 1

When you use the z-index, make sure the CSS position of both (the img and the flash object) is set to relative or absolute:

.imgAboveFlash {
    position: relative;
    z-index: 10; /* higher than that of flash object */
}

And set the wmode of the flash object to opaque.

Make sure that the parent html element has its position set to relative.

Answer 2

I did a HTML menu dropdown purely in CSS and the Flash objects was always on top of every dropdown.

So, here's what I did. Make the Flash wmode to opaque.

For your case, make the flash object wmode to opaque and give an image a z-index higher than a flash object's z-index (try 1000 to "guarantee" higher position).

Answer 3

I'm guessing your code works fine in IE, but not in FF - add a wmode param to your embed as well:

<embed 
    src="/Images/WordOfLife.swf" 
    pluginspage="http://www.macromedia.com/go/getflashplayer" 
    type="application/x-shockwave-flash" 
    name="obj1" 
    menu="false" 
    width="176" 
    height="146"  
    embed="transparent"
/>

Answer 4

Update: I knew it was either one or the other regarding wmode, I picked the wrong one. Shouldn't have answered a question suffering from sleep deprivation. I've checked it now and wmode set to transparent is what you want. It lets you put HTML elements above Flash objects.

Secondly, embed Flash the standards friendly way, and use swfobject.

Try layering a brightly coloured div over your Flash first for test. Also, perhaps move the image code above the Flash and see how that goes.

Finally, all that's needed to get your code to work, as mentioned above by K Prime, is setting wmode to transparent in your embed tag as well.

<div style="position:absolute; top:0px; z-index:-2000;">
    <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="176" height="146">
        <param name="movie" value="/Images/WordOfLife.swf" />
        <param name="wmode" value="transparent" />
        <param name="quality" value="High" />
        <param name="menu" value="false" />
        <embed src="/Images/WordOfLife.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" wmode="transparent" menu="false" width="176" height="146" />
    </object>   
</div>

<div style="position:absolute; top:0px; z-index:2000;">
    <img src="Logo.gif" alt="" />
</div>