Menu
Is it possible to bring a div in front of a flash movie that is in full screen?
How can I do this if it's possible? I want to make a little box in my site and put some links in it and position it on top of a flash movie that is playing in my site so the user can have shortcuts there.
I don't want to put the links inside the flash animation :D
Thank you!
771
You'll want a fixed position element at 100% width and height , if you don't have a background color or image you'll be able to click through it. Set z-index higher then all other elements to ensure it is at the front if you need that.
Here's how you do it. Make sure when embedding the swf you set wmode to transparent, here's a one page example for you. The overFlash div will appear over the movie. Hope this helps!
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; background-color: #ffffff;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
#overFlash{padding:20px;background-color:#D9D9D9;width:150px;position:absolute;left:300px}
</style>
</head>
<body>
<div id="overFlash">
OVER FLASH!
</div>
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="test" align="middle">
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="test.swf" width="550" height="400">
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
