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
Hey 1stbasis...
sorry if I missed your question... where you trying to position a <div> over the top of Flash as the original poster was?
The only way to do that is with a combination of z-index and wmode, as I mentioned earlier.
If all you were trying to do was to get the Flash into the natural flow of the page, then you could use wmode along.
For your review:
Window Mode (wmode) - What's It For?
There are three window modes.
Window
Opaque
Transparent
By default, the Flash Player gets its own hWnd in Windows. This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn't. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser's HTML rendering surface. This is why this default mode (which is equivalent to wmode="window") doesn't allow proper compositing with DHTML layers. This is why your JavaScripted drop-down menus will drop behind your Flash movie.
In windowless modes (like opaque), Flash Player doesn't have a hWnd. This means that the browser tells the Flash Player when and where to draw onto the browser's own rendering surface. The Flash movie is no longer being rendered on a higher level if you will. It's right there in the page with the rest of the page elements. The Flash buffer is simply drawn into whatever rectangle the browser says, with any Flash stage space not occupied by objects receiving the movie's background color.
So wmode only gets you part way, to display content over the top of Flash, you must use z-indexing to "Stack" that content.
Best wishes,
EfV
I followed the thread here and made some changes to my page. Adding the <param name="wmode" value="transparent"> fixed the issue in Internet Explorer, I my video is still showing in front on FireFox. Any suggestions.
Below is the site and the code. http://www.starvisionadsales.com/test3.html
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