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

talentnba

浏览: 93312 次
性别:
来自: 北京

最近访客更多访客>>

zhaoqi1992010

wj_zcy_hfh

wang_zhi_peng2007

chennengwen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

浏览器 Flash Firefox IE CGI

通过设置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代码中添加<param name=’wmode’ value=’transparent’>
在<embed>中添加属性 wmode＝’transparent’
a. 原始的flash代码
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
    codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0'
    width='400px' height='340px'>
     <param name='movie' value='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' />
     <param name='quality' value='high' />
     <embed src='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' quality='high'
      pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'
      type='application/x-shockwave-flash' width='400' height='340'>
     </embed>
   </object>
b. 修改后的代码
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
    codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0'
    width='400px' height='340px'>
     <param name='movie' value='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' />
     <param name='wmode' value='transparent'>
     <param name='quality' value='high' />
     <embed wmode='transparent' src='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' quality='high'
      pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'
      type='application/x-shockwave-flash' width='400' height='340'>
     </embed>
   </object>
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=8,0,0,0'
        width='400px' height='340px'>
        <param name='movie' value='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' />
        <param name='quality' value='high' />
        <embed src='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' quality='high'
         pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'
         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=8,0,0,0'
          width='400px' height='340px'>
       <param name='movie' value='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' />
       <param name='quality' value='high' />
       <embed src='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' quality='high'
            pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'
            type='application/x-shockwave-flash' width='400' height='340'>
           </embed>
     </object>
       </div>
     </body>
   </html>
注：
“<div style=”overflow:auto;”><iframe>…</iframe><object>…</object></div>” firefox 中必须使用这种结构才有效
在IE中只需要使iframe与div在一个同一个位置即可。

分享到：

WindowsXP修改MAC地址 | WinLIKE仿微软视窗属性（二）

2009-04-22 11:14
浏览 2800
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论