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="sample.swf" />
                <param name="wmode" value="transparent" />
                <param name="quality" value="High" />
                <param name="menu" value="false" />
                <embed src="sample.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

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>

Answer 2

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"
/>