Placing DIVs over Flash-Objects

During my attempts to get into the deepest voodoo magic known to man, sometimes referred to as “webdesign”, I stumbled over another problem which took me some time to find the answer to. But since I recently played Professor Layton for the DS and immediately fell in love with it, I don’t mind wracking my brains about a riddle now and then… So my problem was to display a DIV element OVER an existing flash-object.

The first hits on google told me that this is impossible, since the flash-object has no z-index and hence the z-indexing for elements does not work here.

After some more google-usage, I found out that you can tell your flash-object to be “transparent”. You do this by adding the parameter “wmode” and giving it the value of “transparent”. You’ll also have to add wmode=”transparent” to your embed tag. And voila, it worked for me! I haven’t tested it on mac browsers, but as soon as I’ll have I’ll tell you.

So the whole code looks like this:

<div id="flash">
<object border="0" width="802" height="766" id="YOUR_ID_HERE">
<param name="movie" value="myswf.swf">
<param name="allowScriptAccess" value="always">
<strong>&lt;param name="wmode" value="transparent"&gt;</strong>
&lt;embed src="myswf.swf" width="802" height="766" name="YOUR_ID_HERE" <strong>wmode="transparent"</strong>&gt;
&lt;/embed&gt;
&lt;/object&gt;
&lt;/div&gt;

As you can see, I used a unique DIV that holds the flash-object. This DIV has a lower z-index than the DIV that is shown over the flash-object. As I told you, the z-indexing does not work in this case. I just added it for the sake of completeness.

Popularity: 2% [?]