I am trying to put a div layer over a Flash movie. I have tried nesting the div inside of the "Main" div holding everything and nesting it inside the div holding the Flash movie. Nothing seems to work. I also have tried changing the z-index value on the div, but it always ends up behind the flash movie. Here is my code so far. Any help would be sweet! Thanks in advance.
You'll need to incorporate that text within the Flash movie. To my knowledge, HTML cannot be superimposed over a Flash file.
KDLA
FYI
* My screen resolution is set at 1680x1050
* I'm accessing your site through a T1 line
* I'm probably viewing it using Firefox (unless browser is specified)
Here is the code you need to show your div layer above the flash layer. Its all about the embed code for flash. If you use the code below to embed your flash files then it will work. You can see it in action at buttonbeats.com
I found a way to put a div layer above a flash layer. I will post the code below. You have to use this code to embed your flash. Then your div layer will show up over the flash layer.
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" name="FlashID4" width="696" height="266" align="top" id="FlashID4">
<param name="movie" value="images/piano2.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/piano2.swf" width="696" height="266">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="696" height="266" align="top" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
Just wanted to clear up a few misconceptions about placing Flash content in front of or behind other html content.
The original poster was on the right track, z-indexing is how you place the Flash content in front of or behind other html content. What was missing was that z-indexing only work with elements that have a declared position (position:absolute or relative, etc.). When attempting to position Flash content, create a holder <div> for the Flash, give it a background color, width and height dimensions the same as your Flash content, and get that <div> positioned correctly before adding the Flash content.
From second post:
HTML cannot be superimposed over a Flash file
Sure it can, in this case the html container <div> requires a higher z-index than the flash content <div> and no background color.
From third post:
<param name="wmode" value="transparent">
wmode allows content BEHIND the Flash content to “show through” the Flash stage (or document) unless something on the Flash stage blocks it. It has nothing to do with placing html content in FRONT of the Flash content.
From the last post:
Its all about the embed code for flash
Well not really. The embed code by itself would just be in the natural flow of the page and would be parsed by the browser in whatever order and/or position that it appears on the Web page. So it’s not the embed code but rather the use of z-indexing and having a declared position for the <div> containing the Flash. The use of
Code:
<param name="wmode" value="opaque" />
would not allow html content behind the Flash content to show through.
So to sum up, positioning Flash content behind or in front of other html content is all about z-indexing and declaring <div> container positions. The use of wmode will determine if other html content behind the Flash content will show through. Using a combination of these methods would allow you to place Flash content in front of html content, and use wmode transparent to allow content behind the Flash to show through and also place another <div> with html content in front of the whole thing. In other words, 3 layers, 2 html layers with Flash content in the middle.
Best wishes,
Eye for Video www.cidigitalmedia.com
Easy as pie!! ... which by the way ... really ain't so easy if you've ever actually tried to make a lattice cherry pie from scratch... ahhh but you get my meaning!
Your old <object><embed> method of placing Flash on the Web page uses the <object> code for IE.... which you fixed and it WORKS by the way... but you forgot that FF uses the <embed> code... which you haven't fixed.... yet.
Add this to the <embed>
Wow. I'm looking for the opposite. I want my swf file in front and the alternative content behind the swf. Which works great in every browser except for IE9. I was using a table behind the swf file, but IE9 was showing both the flash and the non flash content on the page. (flash on the top of the page and alt content below, showing double images)
So I deleted the table and put my alt. content in a div. gave the alt. content a low z-index and the swf the higher. Nothing works in IE. My alt content is stacked on top.
I'm a newbie so I'm not sure if I should put the code up or not at this time. (I inherited the code from the previous designer). Thanks for any help!
27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="539" title="Sheryl Trail Banner">
Reply With Quote
Originally Posted by KDLA
The answer
Bookmarks