HTML element going behind the flash object

What?

When we have a Flash object(SWF) say a flash banner below HTML menu we see that the menu goes below flash object. The solution for this is…

Include the below script in your head section of your HTML code
Flash embed script

<script>
// script inside the domReady method is executed after page is scriptable
flashembed.domReady(function() {
	// wmode parameter does the trick
	flashembed("flash", {src: "banner.swf", wmode: 'opaque'});
});
</script>

and the style

<style>
#flash {
	width:998px;
	height:281px;
}
</style>

where flash is the ID in which container the actual flash object loads. In our case banner.swf

and in HTML

<div id="flash"></div>

Output:

Demo:

Tags: Flash, jQuery, overlay, SWF

This entry was posted on Wednesday, September 30th, 2009 at 6:50 am and is filed under Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.