Display image above flash object

Question

I came across a difficult situation here ... this is a problem ...
I have a Flash object over which I want to display an image
These are the tricks I tried ...
1. Planning using the z-index (without use)
2.Removing the wmode parameter to transparent / opaque (again useless)
3. Using javascript and displaying the image only after the page (still useless)
I tried a google search but couldn't find a solution .. :(
thanks in advance

Refresh - the code I'm 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"
made all possible offers ... help with ...

Answer 1

Update: I knew that it was either one or the other regarding wmode, I chose the wrong one. Should not have answered the question, suffering from sleep deprivation. I checked it now and wmode is set to transparent what you want. It allows you to place HTML elements over Flash objects.

Secondly, embed Flash in a friendly standard and use swfobject .

Try folding the bright div color on top of your Flash first for a test. Alternatively, perhaps move the image code over Flash and see how this happens.

Finally, everything you need to get your code to work , as mentioned by K Prime, sets wmode to transparency in your embed tag, as well .. p>

 <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 assume your code works fine in IE, but not in FF - add the wmode parameter to your embed :

 <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 3

When using z-index, make sure the CSS position of both (img and flash object) is set equal 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 the parent html element has a position set to relative .

Answer 4

I only dropped out in the HTML menu in CSS, and Flash objects were always on top of every drop-down list.

So here is what I did. Make Flash wmode opaque.

In your case, make the wmode flash object opaque and give the image a z-index higher than the z-index of the flash object (try 1000 to “guarantee” a higher position).

Answer 5

set wmode to transparent as shown above, but put the content in an iframe. it just solved my problems: http://argyleink.com/dieantsdie/