As you can see, the rude little dancing man doesnt allow my box to be on top!

Aah! that's better! Now with that bit of script and code I can be number 1 again. Time to hide that dancing mad man!

Instructions (how it's done)

In this example 2 Flash files are placed on the page. The left hand file doesn't allow the blue div box to sit on top, no matter how you code the z-index. This is how Flash files usually behave.

The right hand Flash is allowing the yellow div box to sit on top. This is a simple bit of code that links the Flash file into a div box, instead of inserting it as a media object, as you would usually do. Here's how to do it ...

1. First off you need to download the SWFobject here (this allows the script to work).

2. Then you need to put <script type="text/javascript" src="swfobject.js"></script> before the </head> tag.

3. Then you need to make your div box as you would normaly do.

4. The last thing is a little script that can go anywhere in the html (I usally put it near the div box so if I need to make changes I can find it easily) ...

<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("Flash File.swf", "Div Box", "H", "W", "F", "C");
so.addParam("wmode", "opaque");
so.write("Div Box");
// ]]>
</script>

Flash File- type in the name of your flash file.
Div Box- Type the name of the div box you want the flash in.
H- Type the hight of the flash file.
W- Type the with of the flash file.
F- Put the flash version here (it should tell you when render out the file).
C- This is just the colour code for the background of your flash.

Have a look at the source code to see what's going on. There are two notes in the html so you can easily see which code is for which box.

WARNING: Sadly when you do all of this, the placement of the Flash file does tend to go a little crazy, and won't be the same as the div box. The only thing you have to do is keep changing the div box and previewing it in a broswer untill the Flash is in the correct location. Dont worry though, as it appears to be a problem with the script and not the css for the box, so even though it will look wrong in Dreamweaver, it will be placed correctly on the different broswers.

Booster Cushion Theatre example website. Go on treat yourself!

Flash layering problem with old browsers (pre IE7) - SWFobject Java Script

By Gareth While

This examples demonstrates a work around to allow the control of the layering of Flash files and <div> boxes.