We have faced this problem many of the times. When we want to display some message on top of all layers on a page or use some feature like jQuery light boxes. Normally the flash file continues to shine through the page. No matter what you do with layering the dom elements using z-index.
See the layering flash content problem definition here.
Before this, people used to dodge this issue with some fixes like hiding the flash area completely and then showing a static image of the html file in its place. Then it gave a semblance of layering flash beneath html content. But since flash 9 we can layer flash elements under html with ease.
See the solved situation where we have content over flash.
What you need to do to achieve this?
Nothing much. You set z-index value to your divs. Say we have a flash div (#flasho), a div for creating a the transparent layer (#transo), and the div for displaying content as a light box (#boxo)
Now for the flash part we need to do this little addition. Add wmode=”transparent” to the <embed> tag and <param value=”transparent” /> to the <object> tag. See my Flash code below that I have used in my example.
<div style="float:left;width:343px;height:160px;margin-top:7px;z-index:0;"> <OBJECT codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH="343" HEIGHT="160"><PARAM VALUE="flash/course-in-aviation.swf"><PARAM VALUE=high><PARAM VALUE=#00000><param value="transparent" /><EMBED src="flash/course-in-aviation.swf" quality=high bgcolor=#FFFFFF WIDTH="343" HEIGHT="160" wmode="transparent" NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT> </div>
Thanks for the code, I’ve been stuck on getting my jQuery drop-down to display over my Flash site for awhile.
Nice article…i have the same issue….where my flash part is declared within script .its not mentioned in html tag…so am not able to add wmode=”transparent” in to my embed tag…waiting for your reply
You should be able to embed it as a param. ()
param name=”wmode” value=”transparent”
hi i have same flash problem in html. i use your answer its really helpful to me thank you..
Thank u! you’ve just solved a big problem for me.
Rajesh duuuuuuuuude. Thanks a million. The good that you did me, hope comes back x10