Picture over Flash

Question

Do you know any solution to put a picture over a Flash?

It must work in IE6, IE7, Firefox for Windows, MacOSX, Linux and Safari.

Answer 1

Off the top of my head you could try this:

Absolute positioned div with the image over the swf

You must set swf's parameter "wmode" value as "transparent".

You could also go to www.actionscript.org and do a search on their forum.

Answer 2

Funnily, I did something similar on SO, but over the arrow of a combo box... Reusing the technique:

<object width="550" height="450"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" 
    classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000">
<param name="movie" value="http://somesite.org/Tests/Spiffy.swf"/&gt;
<param name="wmode" value="opaque"/>
<object type="application/x-shockwave-flash" width="550" height="450"
    data="http://somesite.org/Tests/Spiffy.swf"&gt;
<param name="wmode" value="opaque"/>
<img src="NoFlash.png" width="550" height="450" alt="Placeholder if no Flash" />
</object>
</object>
<div style="background-color: blue;
    min-width: 100px; width: 100px; min-height: 100px; height: 100px;
    position: relative; right: -250px; top: -250px;">&Nbsp;</div>

Found the wparam=opaque trick at wmode and z-index, search fueled by the remark of tehborkentooth above (which advised to use transparent, but it didn't work for me).

Of course, the style of the div should go in a class. The Nbsp is to make SO happy, it must be   or real content, of course.

Answer 3

Same question

Answer 4

The wmode=opaque provides better performance than "transparent", with pretty much the same results.