Webpage Layers and Flash

[Tanoro]

I've got some flash on my site that sites right under a javascript drop menu. Unfortunately, whenever I use the drop menu on most browser, the menu drops behind the flash. Is there a way to make sure the flash sits behind other page elements that may appear?

You can see in the picture I've included that there is a flash banner for our radio station. There is a drop menu that appears when you click the SEARCH button. Unfortunately, this menu falls behind the flash. Is there a way to fix this by making the flash stay behind everything else or adjusting to make the javascript stay on top?

[fenderocker]

through css set the flash's z-index to 0. Or you could set the drop-down's z-index to 100. OR you could do both.

[Tanoro]

Tried that already. No dice. -_-;

[Tanoro]

Alright guys! I found a way to cope with flash objects falling behind floating page elements. It was suprisingly simple.

<param name="wmode" value="opaque" />

By adding the wmode parameter, I can set the entire object behind other page elements.

My embedded flash code now looks like this:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="68" id="logo" align="middle">
<param name="wmode" value="opaque" />
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
<embed src="flash.swf" quality="high" bgcolor="#ffffff" width="300" height="68" name="logo" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

This parameter seems to do the trick well enough. I have noted that this parameter is not supported in some browsers. I have tried it in IE7, Safari for Mac, and Firefox 2.0 for both Windows XP and Mac. This parameter functioned perfectly in all except the Windows version of Firefox.

Reference:
http://capcai.indorelation.com/blog/...h-behind-html/

[Stimulus]

Wow! After 2 months!

[Tanoro]

Yeah, isn't that something? I posted this question 2 months ago and it went unanswered on Tizag until I found the answer for myself.

It was actually tricky searching the web for layer issues using flash objects because the term "layer" was ambiguous and I couldn't find what I needed.

[ultimateace]

I'm glad you posted the solution here, cause that will help all the other people like you who have those issues. Thanks for sharing!

[starfish888]

Hi All,

Thank you so much for your contributions, they have helped me to remedy my swf layering issue - but I was still stuck until I figured this one thing out. (Why wasn't the z-index working in window's Firefox???) So, in addition to the instuctions above I find that:

When adding the tag: <param name="wmode" value="transparent" /> to your object tag, be sure to also include an embed tag (that will load the swf for Firefox purposes) inside the bottom of your object tag, just before the closing </object> tag. Once the embed tag is added, be sure to include the following in that tag: wmode="transparent".

NOTE: The transparent call must be added to BOTH the OBJECT tag and the EMBED tag in order for this to work in all of the browsers that Tanoro tested PLUS the Windows Firefox. (see below for an example)

<code>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="flashplayer" style="position:absolute; height:100%; width:100%; top:175px; left:-20px; z-index:0;">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="NameOfYourFlash.swf" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<embed src="NameOfYourFlash.swf" quality="high" width="600" height="450" name="flashplayer" align="right" allowScriptAccess="sameDomain" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>

</code>

Enjoy - Hope this helps!
Starfish888

[Tanoro]

Yeah, I have since discovered that as well. I just neglected to go back and change this thread. Thanks for the addition.

[arcem]

Thank you for this solution - I found this the following simple embed worked just fine in Windows Firefox 3.

<embed src="myfile.swf" width="1013" height="389" wmode="transparent"/>