Today I was asked to place some HTML content over the top of an existing flash website. This seems like an easy process but like always, flash finds a way to make life difficult. I have found the best way to put any HTML or Jquery enabled content over the top of Flash. Follow these simple steps for success:
Step 1
Flash can be embeded a number of ways. Make sure that your Flash Website ends up in a div container with these CSS attributes (my div has an id of flashcontent):
#flashcontent
{
position:absolute;
height:100%;
width:100%;
z-index:1;
}
Step 2
Now, lets add some CSS to your html content. In my case, I was using a fancybox (jquery lightbox) to float an image over the top of the flash.
img#floating-html
{
position:absolute;
top:50%;
margin-top:-200px;
left:50%;
margin-left:-300px;
height:600px;
width:400px;
z-index:2;
}
Step 3
So we have put our html and flash on different layers using z-index but if you look at your website you will notice that the flash is still on top! Dont panic, your html and css is fine, this is just flash throwing a little tantrum. We need to give our flash a parameter to tell it to act like a normal html layer.
Find your javascript code that embeds your flash and add in this param:
so.addParam("wmode", "opaque");
This is what my Javascript code looks like with the new added param:
var so = new SWFObject("regal-ballroom-v1-9.swf", "site", "100%", "100%", "10", "#1D1010");
so.useExpressInstall('expressinstall.swf');
so.addParam('menu', 'false');
so.addParam("wmode", "opaque");
if(so.write('flashcontent')){
var macmousewheel = new SWFMacMouseWheel(so);
}
