www.webdeveloper.com
Results 1 to 12 of 12

Thread: div layer over a flash movie help

  1. #1
    Join Date
    Nov 2006
    Posts
    24

    div layer over a flash movie help

    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.

    <body>

    <div class="Main">


    <div class="Banner">
    <object classid="clsid27CDB6E-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">
    <param name="movie" value="shreylTrail.swf" />
    <param name="quality" value="high" />
    <embed src="shreylTrail.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="539"></embed>
    </object>



    </div>



    <div class="basic">


    More content here

    </div>




    </div>






    </body>

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    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)

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there webwarrior925,

    you probably need to use...

    <param name="wmode" value="transparent">

    Further Reading:-
    coothead

  4. #4
    Join Date
    Nov 2006
    Posts
    24
    Quote Originally Posted by KDLA
    You'll need to incorporate that text within the Flash movie. To my knowledge, HTML cannot be superimposed over a Flash file.

    KDLA


    This is what I ended up doing.



    and thanks for that code coothead. I'll give that a try in some free time.

  5. #5
    Join Date
    Jan 2010
    Posts
    1

    Smile The answer

    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>



  6. #6
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    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

  7. #7
    Join Date
    Dec 2011
    Posts
    1

    Played arround

    Ok, Now for the answer "Eye for Video", would it be a quiz show you would be out. Sorry mate.

    I played arround with every solution offered in this thread.

    The right answer is indeet " <param name="wmode" value="opaque" /> "

    I tried the z-index with and without position: relative; & position: absolute; & position: static;

    Not one of these styles gave me the desired result but the object parameter wmode opaque did give me the desired result.

  8. #8
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    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

  9. #9
    Join Date
    Jan 2012
    Posts
    1
    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

    Code
    <div id="Layer1" style="position:absolute; z-index:1; left: 171px; top: 155px; width: 290px; height: 260px; overflow: hidden; visibility: visible;" onMouseOut="MM_timelineGoto('Timeline1','1');MM_timelinePlay('Timeline1')" onMouseOver="MM_timelineStop()">
    <div align="left">
    <object width="290" height="260"
    classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
    codebase="http://www.apple.com/qtactivex/qtplugin.cab">
    <param name="wmode" value="transparent">
    <param name="src" value="movies/demopen.mp4">
    <param name="autoplay" value="true">
    <param name="controller" value="false">
    <embed src="movies/demopen.mp4" width="290" height="260"
    autoplay="true" controller="false"
    pluginspage="http://www.apple.com/quicktime/download/"> </embed>
    </object>
    </div>
    </div>
    <div id="Layer2" style="position:absolute; z-index:2; left: 59px; top: 0px; width: 532px; height: 653px; visibility: visible;" onMouseOut="MM_timelineGoto('Timeline1','1');MM_timelinePlay('Timeline1')" onMouseOver="MM_timelineStop()">
    <div align="left"><img src="images/tv-hole.png" width="532" height="653" /></div>
    </div>

    Thanks,
    Jason

  10. #10
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    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>
    Code:
    wmode="transparent"
    Bada Boom, Bada Bing!
    Have a GREAT day!
    EfV

  11. #11
    Join Date
    Sep 2012
    Posts
    1

    Thanks

    That worked fine for me - FF & IE 9... thanks for the help!

  12. #12
    Join Date
    May 2006
    Posts
    3
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles