不同浏览器中Div层覆盖Flash层的几种方法

易购小天地 · 发表于 2012-8-12 22:03:16

问题：
通过设置Div层跟Flash层的z-index并不能使Div层覆盖Flash层。
官方解释：
A Flash movie in a layer on a DHTML page containing several layers may display above all the layers, regardless of the stacking order
(”z-index”) of those layers.
解决方案：
1. 修改flash自身属性，适用 Firefox 跟 IE
这种方案需要修改flash代码，使flash在加载时为透明的，所以div层可以覆盖这个flash。
在原来的flash代码中添加
在中添加属性 wmode＝’transparent’
a. 原始的flash代码

b. 修改后的代码

2. 修改position属性[[BR]][[BR]]
把用来覆盖Flash的Div层设置position:fixed。由于ie不支持fixed，所以这种方式只适用于Firefox。
a. 示例代码

<html>
   <head>
   <title>div cover flash with fixed property</title>
   </head>
   <body>
   <div id="cover_div" style="position:fixed;width:100px;height:100px;background-color:blue;">I cover the Flash.</div>
   <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
      codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0'
      width='400px' height='340px'>
      <param name='movie' value='http://www.baihuagw.com' />
      <param name='quality' value='high' />
      <embed src='http://www.baihuagw.com' quality='high'
      pluginspage='http://www.macromedia.com/go/getflashplayer'
      type='application/x-shockwave-flash' width='400' height='340'>
      </embed>
   </object>
   </body>
</html>

3. 使用iframe
使用iframe的方式可以同时支持firefox跟IE，但是实现方式略有不同。
原理都是先用iframe盖住flash，然后设置iframe的z-index使div能盖住这个iframe。
但是在firefox中iframe 默认状态下不能盖住 flash，需要将flash所在层的autoflow属性设为auto，IE下没有此问题。
a. 在firefox中的示例代码

<html>
   <head>
   <title>div cover flash with iframe</title>
   </head>
   <body>
   <div id="cover_div" style="position:absolute;width:100px;height:100px;background-color:blue;z-index:9">I cover the Flash.</div>
   <div style="overflow:auto;">
      <iframe id="cover_iframe" frameborder="0" style="position:absolute;width:100px;height:100px;z-index:8;"></iframe>
   <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
      codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0'
      width='400px' height='340px'>
   <param name='movie' value='http://www.baihuagw.com' />
   <param name='quality' value='high' />
   <embed src='http://www.baihuagw.com' quality='high'
         pluginspage='http://www.macromedia.com/go/getflashplayer'
         type='application/x-shockwave-flash' width='400' height='340'>
         </embed>
   </object>
   </div>
   </body>
</html>

帐号		自动登录	找回密码
密码			立即注册