Menu Drop-Downs Falling Behind Flash Objects and Iframes

Placing a flash movie or Google map on your page can be useful, but not when menu drop downs fall behind the flash object or iframe.

Flash is always the highest thing on the page wether you give it a z-index or not.

When I placed the flash on the websites page I tried using the search box, and the results always showed up behind the flash movie.

Some suggest wrapping the movie or iframe in a div with a low z-index or 'stacking order' but this unfortunatly does not work.

My original code to embed the flash used an iframe to avoid the problem of embedding a flash file which uses an xml into the joomla content management system. It looked like this:

Original code:


<iframe src="PathToMy.swf" width="900px" height="300px" frameborder="0" scrolling="auto"></iframe>

This was working great and the SWF could read the XML file, but the search results were faling behind the movie.

The solution is to change the way you embed the flash file. It should be placed in an object tag like this:

Correct code:

<object height="300" width="900" codebase=",0,32,18" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> <param name="src" value="PathToMy.swf" /> <param name="wmode" value="transparent" /><embed height="300" width="900" wmode="transparent" src="PathToMy.swf" type="application/x-shockwave-flash"></embed> </object>

For objects to appear over the movie, the flash file has to use the transparent window mode which cannot be added to an iframe.

One drawback of this method is that interactive actionscripts don't work. With the original file you could scroll the images with your mouse wheel, now you have to click on one.

If you are embeding the flash file into a content management system such as joomla, this also has the problem of the SWF file not being able to read the XML file.

The solution to this is to place the SWF and XML files in the root directory of your site with the correct path to your images.