http://www.blogjava.net/ebecket 返还网
随笔-140  评论-11  文章-131  trackbacks-0
解决下拉菜单会被swf文件遮住的问题


若选择了“窗口”，则输出的Html代码中没有“<param name="wmode" value="***">”代码。
若选择了“不透明无窗口”，则输出的Html代码中有“<param name="wmode" value="opaque"> ”
若选择了“透明无窗口”，则输出的Html代码中有“<param name="wmode" value="transparent"> ”

"窗口"不会在 object 和 embed 标记中嵌入任何窗口相关属性。Flash 内容的背景不透明并使用 HTML 背景颜色。HTML 无法呈现在 Flash 内容的上方或下方。这是默认设置。
"不透明无窗口"将 Flash 内容的背景设置为不透明，并遮蔽 Flash 内容下面的任何内容。"不透明无窗口"将 HTML 内容显示在 Flash 内容的上方或上面。
"透明无窗口"将 Flash 内容的背景设置为透明。此选项使 HTML 内容显示在 Flash 内容的上方和下方。
注重在某些情况下，当 HTML 图像复杂时，透明无窗口模式的复杂呈现方式可能会导致动画速度变慢。


1.被Flash挡住
设置Flash的参数：<param name="wmode" value="opaque">
<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="468" height="60"><param name="movie" value="">
<param name="wmode" value="opaque"><param name="quality" value="high"><embed src="" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="60"></embed></object>
<div style="position:absolute;left:150;top:50;width:100px;height:50px;background:green">
</div>
或者用<param name="wmode" value="transparent">
<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="468" height="60"><param name="movie" value="">
<param name="wmode" value="transparent"><param name="quality" value="high"><embed src="" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="60"></embed></object>
<div style="position:absolute;left:150;top:50;width:100px;height:50px;background:green">
</div>
2.被图片挡住
这个估计是因为图片也放在层中，而图片所在层的Z轴索引值比该层大，所以被挡住，解决办法是更改该层的Z轴索引值至比图片层大。
<div style="position:absolute;left:0;top:20;z-index:2;background:red;width:120px;height:70px">
1<img src="">
</div>
<div style="position:absolute;left:50;top:50;z-index:2;background:green;width:120px;height:70px">
2<img src="">
</div>
<div style="position:absolute;left:90;top:80;z-index:2;background:blue;width:120px;height:70px">
3<img src="">
</div>
3.被表单控件挡住
这个目前还没有完美的解决方法，一般都是在设计排版时就尽量避免这种情况，如果是万不得已，就在层经过表单控件时让表单控件隐藏，过后再让它显示：
<button onClick="oSelect.style.display='none';oLayer.style.display='inline'">显示层隐藏下拉选项</button><button onClick="oSelect.style.display='inline';oLayer.style.display='none'">显示下拉选项隐藏层</button>

<div style="position:absolute;left:0;top:50;z-index:2;background:red;width:120px;height:50px">
z-index:1<select id="oSelect"></select>
</div>
<div id="oLayer" style="position:absolute;left:30;top:60;z-index:2;background:green;width:120px;height:70px;display:none">
z-index:2<img src="">
</div>
当然还有用优先级别较高的控件来代替层的方法解决，但控件并非是每台机器上都有安装，而且控件的可定制性也差，也就是常说的兼容性问题：
hhctrl.ocx
<OBJECT id=hhctrl type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" codebase="<I>file:</I>hhctrl.ocx#Version=4,0,0,24" width=80 height=20>
<PARAM name="Command" value="Related Topics, MENU">
<PARAM name="Button" value="Menu">
<PARAM name="Item1" value="[X-Eyes];http://x-lover.com/forums/">
<PARAM name="Item2" value="闪客之吧;http://www.flash8.net">
<PARAM name="Item3" value="零刻联盟;http://www.linkmeng.com/">
<PARAM name="Item4" value="蓝色理想;http://www.blueidea.com/">
<PARAM name="Item5" value="<a href="http://www.5d.cn">5D多媒体</a>;http://www.5d.cn">
</OBJECT>
<select></select>
window.createPopup()窗口(需要IE5.5+支持)
<SCRIPT>
var oPopup = window.createPopup();
function showPopupWin(){
var oPopBody = oPopup.document.body;
oPopBody.style.backgroundColor = "green";
oPopup.show(50, 120, 180, 65,document.body);
}
</SCRIPT>
<BUTTON onclick="showPopupWin()">Click Me!</BUTTON><select></select>
<iframe src="index.asp"></iframe>

通过设置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在一个同一个位置即可。

Flash覆盖div（层）解决方案

[ 2008-11-19 09:03 | 作者: Kiven ]
字体: 大 | 中 | 小
有两种方法：一种就是设置flash为透明，但是如果你在DW中插入动画，再加

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

是不生效的。要把整个的flash插件代码换成如下：
<object type="application/x-shockwave-flash" data="" width="560" height="210">

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

</object>


对比一下，和DW自动生成的代码是有区别的，测试过，IE　FF　均可以。

第二种方法：

设置flash置底，加个代码：<param name="wmode" value="opaque" />

但是只加这个代码，IE可行，在FF下，失效。要想在FF下起作用，还要用在<object　里加个　wmode="opaque" ，实例代码如下：
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="" width="560" height="210">
<param name="movie" value="" />
<param name="quality" value="high" />
<param name="wmode" value="opaque">

<embed src="" wmode="opaque" quality="high" pluginspage="" type="application/x-shockwave-flash" width="560" height="210"></embed>

</object>


另外一种方法是：

将flash object 改变
<style>
div {
width:100px;
height:100px;
position:absolute;
top:20px;
left:20px;
background:red
}
object {
width:400px;
height:100px;
}
</style>

<div>aaaa</div>
<object type="application/x-shockwave-flash" data="">
<param name="movie" value="" />
<param name="wmode" value="transparent" />
</object>
Tags: , ,
posted on 2009-10-12 14:28 becket_zheng 阅读(3491) 评论(2)  编辑  收藏 所属分类: web前端开发

评论:
# re: 解决下拉菜单会被swf文件遮住的问题 2012-03-17 17:44 | qq2293502086
好文章 ，作者的水平太高了。。。  回复  更多评论
  
# re: 解决下拉菜单会被swf文件遮住的问题 2016-04-07 10:00 | beiwei32
厉害 发帖人！谢谢！  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by: 博客园 模板提供：沪江博客 Copyright ©2024 becket_zheng