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

liu__software

于 2017-06-19 11:06:45 发布

阅读量446

点赞数

分类专栏： flash 文章标签： flash

flash 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

问题：
通过设置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...,0,0,0'
        width='400px' height='340px'>
        <param name='movie' value='http://blog.ku6.com/ku6_v.... />
        <param name='quality' value='high' />
        <embed src='http://blog.ku6.com/ku6_v.... quality='high'
         pluginspage='http://www.macromedia.com/...
         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...,0,0,0'
          width='400px' height='340px'>
       <param name='movie' value='http://blog.ku6.com/ku6_v.... />
       <param name='quality' value='high' />
       <embed src='http://blog.ku6.com/ku6_v.... quality='high'
            pluginspage='http://www.macromedia.com/...
            type='application/x-shockwave-flash' width='400' height='340'>
           </embed>
     </object>
       </div>
     </body>
   </html>

liu__software

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不同浏览器中Div层覆盖Flash层的几种方法

不同浏览器中Div层覆盖Flash层的几种方法问题：通过设置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 th
复制链接

扫一扫