Flash Banner always appears on top of HTML content [Archive]

existing

03-25-2009, 02:20 PM

Hi, I have a menu system just above the Flash Banner in my HTML. I cannot see the dropdown sub menus when I rollover the navigation buttons because no matter what I do (change the z-index and 'positioning:absolute' in my css) the Flash Banner always covers the dropdown sub menus.

Any ideas what I can do to fix this?

6StringGeek

03-25-2009, 02:28 PM

Try adding this parameter to your flash object:

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

existing

03-25-2009, 02:50 PM

No, it did not work for me. Here is the relevant part of my code (flash banner object is in the blue text at the bottom):


<div id="navigation" class="grid_12">

<div class="floatObjectLeft topZ">

<div id="navRollover1"><a href="#"><img src="images/chiro_blue_glass/layout/navigation/home_btn.jpg" height="40" width="135" alt="Home" /></a></div>

</div>

<div id="navMenu1" class="floatObjectLeft topZ" onmouseover="showDropMenu(1);" onmouseout="setDropMenuOutTimer(1);">

<div id="navRollover2"><a href="#"><img src="images/chiro_blue_glass/layout/navigation/about_btn.jpg" height="40" width="134" alt="About" /></a></div>

</div>

<div id="navMenu2" class="floatObjectLeft topZ" onmouseover="showDropMenu(2);" onmouseout="setDropMenuOutTimer(2);">

<div id="navRollover3"><a href="#"><img src="images/chiro_blue_glass/layout/navigation/services_btn.jpg" height="40" width="134" alt="Services" /></a></div>

</div>

<div id="navMenu3" class="floatObjectLeft topZ" onmouseover="showDropMenu(3);" onmouseout="setDropMenuOutTimer(3);">

<div id="navRollover4"><a href="#"><img src="images/chiro_blue_glass/layout/navigation/library_btn.jpg" height="40" width="134" alt="Library" /></a></div>

</div>

<div class="floatObjectLeft topZ">

<div id="navRollover5"><a href="#"><img src="images/chiro_blue_glass/layout/navigation/testimonials_btn.jpg" height="40" width="134" alt="Testimonials" /></a></div>

</div>

<div class="floatObjectLeft topZ">

<div id="navRollover6"><a href="#"><img src="images/chiro_blue_glass/layout/navigation/faq_btn.jpg" height="40" width="134" alt="F.A.Q." /></a></div>

</div>

<div id="navMenu4" class="floatObjectLeft topZ" onmouseover="showDropMenu(4);" onmouseout="setDropMenuOutTimer(4);">

<div id="navRollover7"><a href="#"><img src="images/chiro_blue_glass/layout/navigation/the_office_btn.jpg" height="40" width="135" alt="The Office" /></a></div>

</div>

<div id="dropMenu1" class="menuDrop floatObjectLeft" onmouseover="clearTimeout(dropMenuOutTimer)" onmouseout="setDropMenuOutTimer(1)">

<a href="#" onfocus="if(this.blur)this.blur();">Biography</a>
<a href="#" onfocus="if(this.blur)this.blur();">Facility</a>
<a href="#" onfocus="if(this.blur)this.blur();">Technology</a>
<a href="#" onfocus="if(this.blur)this.blur();">Core Focus</a>

</div>

<div id="dropMenu2" class="menuDrop floatObjectLeft" onmouseover="clearTimeout(dropMenuOutTimer)" onmouseout="setDropMenuOutTimer(2)">

<a href="#" onfocus="if(this.blur)this.blur();">Pain Management</a>
<a href="#" onfocus="if(this.blur)this.blur();">Sports Injury and Injury Prevention</a>
<a href="#" onfocus="if(this.blur)this.blur();">Nutrition and Fitness</a>

</div>

<div id="dropMenu3" class="menuDrop floatObjectLeft" onmouseover="clearTimeout(dropMenuOutTimer)" onmouseout="setDropMenuOutTimer(3)">

<a href="#" onfocus="if(this.blur)this.blur();">Back Problems</a>
<a href="#" onfocus="if(this.blur)this.blur();">Headaches</a>
<a href="#" onfocus="if(this.blur)this.blur();">Restricted Movement</a>

</div>

<div id="dropMenu4" class="menuDrop floatObjectLeft" onmouseover="clearTimeout(dropMenuOutTimer)" onmouseout="setDropMenuOutTimer(4)">

<a href="#" onfocus="if(this.blur)this.blur();">Contact</a>
<a href="#" onfocus="if(this.blur)this.blur();">Office Hours</a>
<a href="#" onfocus="if(this.blur)this.blur();">Google Map</a>

</div>

</div>


<div class="clearByZero"></div>


<div id="banner" class="grid_12">

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','940','height','380','title','chiro_website_system_1_homepage_ flash_banner','src','flash/home_page/chiro_website_system_1_homepage_flash_banner','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/home_page/chiro_website_system_1_homepage_flash_banner' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="940" height="380" title="chiro_website_system_1_homepage_flash_banner">
<param name="movie" value="flash/home_page/chiro_website_system_1_homepage_flash_banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="flash/home_page/chiro_website_system_1_homepage_flash_banner.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="940" height="380"></embed>
</object>
</noscript>

</div>

Eye for Video

03-25-2009, 04:18 PM

The "transparent" mode is used to allow the Web page content which is behind the Flash to show through the Flash wherever no objects have been placed on the Flash stage, not to allow other objects above the Flash to cover over it.
Flash in the default "window" mode is not actually in the natural flow of the page but in a layer above. From a previous post:
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.
Once you have the correct mode set, you still need to work out the positioning and z-indexing so I suggest that before placing your Flash content into the
<div id="banner" class="grid_12">
set the width and height of that <div> in your CSS equal to the Flash content and simply give the div a background color (something that really sticks out). Make sure everything is working that way first, then add in the Flash with wmode=Opaque. Give that a try and see if you make any progress.
Best wishes,
Eye for Video
www.cidigitalmedia.com

existing

03-25-2009, 05:47 PM

Okay, that isn't working either. I verified that the dropdowns are showing up over the <div id="banner"> background by setting a background color as you instructed, but the flash movie is still on top of everything. Here's what my banner div looks like now:


<div id="banner" class="grid_12">

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','940','height','380','title','chiro_website_system_1_homepage_ flash_banner','src','flash/home_page/chiro_website_system_1_homepage_flash_banner','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/home_page/chiro_website_system_1_homepage_flash_banner' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="940" height="380" title="chiro_website_system_1_homepage_flash_banner">
<param name="movie" value="flash/home_page/chiro_website_system_1_homepage_flash_banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed wmode="opaque" src="flash/home_page/chiro_website_system_1_homepage_flash_banner.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="940" height="380"></embed>
</object>
</noscript>

</div>

existing

03-26-2009, 04:09 AM

Okay, I've figured out what my problem is. The suggested actions to add the parameters of wmode='opaque' or wmode='transparent' should have worked. Opaque makes the flash movie windowless, allowing it to be repositioned on the Z axis by changing the css z-index property of the flash container, i.e. <div> tag. Transparent does the same thing, but will make the background of the flash movie completely transparent, so if there were to be background not covered by content within the flash movie, the background will show through.

In essence, the suggestions from the previous posts should have worked, but they did not in my case, and WILL NOT if the AC_RunActiveContent.js file and AC_RunActiveContent() function from that file is being used and called from within the <script> tag, just before the <object> tag containing the flash object information.

This is because the AC_RunActiveContent() function in your HTML file, within the <script> tags, needs to also have the parameter wmode set to either 'opaque' or 'transparent' added to it. Just add the code: 'wmode','opaque' within the AC_RunActiveContent() function parameters.

In fact, when this is done, the parameter for the wmode does not need to be added to the <object> tag. See the highlited code below to see how this works out:


<div id="banner" class="grid_12">

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','940','height','380','title','chiro_website_system_1_homepage_ flash_banner','src','flash/home_page/chiro_website_system_1_homepage_flash_banner','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','opaque','movie','flash/home_page/chiro_website_system_1_homepage_flash_banner' ); //end AC code
</script>
<noscript>
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="940" height="380" title="chiro_website_system_1_homepage_flash_banner">
<param name="movie" value="flash/home_page/chiro_website_system_1_homepage_flash_banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />//not needed, but still will work with this here.
<embed wmode="opaque" src="flash/home_page/chiro_website_system_1_homepage_flash_banner.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="940" height="380"></embed>//same for in the <embed> tag, parameter for wmode is not needed, but still works.
</object>
</noscript>

</div>

Eye for Video

03-28-2009, 10:46 AM

And I thank you for passing that on! I always appreciate learning from other people's experiences.
EfV