Geek Answers Handbook

Placing a div before inserting flash

I need to place the div tag above literally everything else on the page. I read that setting wmode param to opaque will do this, but also heard that this will only affect IE. It's true? How do you do this?

+7
css flash embed
source share
2 answers

In the flash applet tag, just do the following:

<object id='flashObject' ....> <param ....> <param name='wmode' value='opaque'> <embed ... wmode='opaque'> </embed> </object>

That should take care of this.

Note that the disadvantage of this is that rendering is slow for both the flash movie and the page elements, but in most cases this should not be a problem.

In addition, by including this as an object parameter or an embed attribute, it works in all major browsers.

Edit, according to MidnightLighning's comment:

Once the Flash object is prepared this way, you need to place the div above the page, for example:

 <body> <object> ... <!-- this is your flash movie --> </object> <div id="floater">The Floating Div</div> </body>

Then create your CSS as follows:

 #flashObject { position:relative; z-index:1 } #floater { position:absolute; z-index:100; top:0; left:0; }
+7
source share

On my client site, I used html:

 <div id="photo> <div id="flash"></div> <ul id="navigation">..</ul> </div>

CSS

 #flash { z-index: 6; } #navigation { z-index: 8; margin-top: -100px; }

and then I replace #flash my swf flash with SWFObject ( http://code.google.com/p/swfobject )

So basically, z-index and some smart way to embed flash files should work :)

0
source share

More articles:


All Articles