您当前的位置: 首页 » DIV+CSS编程 » 解决下拉菜单被flash遮住问题
解决下拉菜单被flash遮住问题
论坛链接
:o 下拉菜单被flash或其他层遮住始终是个问题，相信很多人都遇到过这个问题。但这个问题其实可以说是我们自己造成的，因为我们总是不明不白的就把那写属性写或粘贴上去。
下面我们来分析一下原因：
wmode 属性/参数值 Window | Opaque | Transparent
模板变量：$WM
"Window"在 Web 页上用影片自己的矩形窗口来播放应用程序。"Window"表明此 Flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。
"Opaque" 使应用程序隐藏页面上位于它后面的所有内容。
"Transparent"使HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。
"Opaque windowless"和"Transparent windowless"都可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的HTML 层可以透过该部分显示出来，而"opaque"则不会显示。
如果忽略此属性，默认值为 Window。仅适用于object。
Window速度快、有效率，但无法使用z-index，也没有办法混用于DHTML图层当中，这就是为什么常有人在抱怨自己的下拉菜单跑到Flash后面。
Opaque除了可以让你正确控制z-index的样式，也可以透过Javascript來控制它的大小或是移动swf的位置！不过要注意，Opaque的背景可是没有办法透明的，也就是说，任何內容都会被放在swf下面。
至于Transparent，想当然，就是把flash的背景变成透明。让swf档案可以融入网页当中而不会出现讨厌的白底，不过，transparent在IE里面是真的透明，也就是说，下面的网页內容是可以被选取起來的，但是在FF里面，就很讨厌了，因为虽然看起來透明，但是滑鼠卻无法点选。另外，要稍微注意的是，使用这个值，会让你的flash影片变得比较慢！
找到原因了我们就来解决问题：
一、设置flash为透明：但是如果你在DW中插入动画，再加<param name="wmode" value="transparent">是不生效的。要把整个的flash插件代码换成如下：
<object type="application/x-shockwave-flash" data="http://www.konnech.cn/2/images/banner.swf" width="560" height="210">
<param name="movie" value="http://www.konnech.cn/2/images/banner.swf" />
<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="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="560" height="210">
<param name="movie" value="http://www.konnech.cn/2/images/banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque">
<embed src="http://www.konnech.cn/2/images/banner.swf" wmode="opaque" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="560" height="210"></embed>
</object>
下面我们来分析一下原因：
wmode 属性/参数值 Window | Opaque | Transparent
模板变量：$WM
"Window"在 Web 页上用影片自己的矩形窗口来播放应用程序。"Window"表明此 Flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。
"Opaque" 使应用程序隐藏页面上位于它后面的所有内容。
"Transparent"使HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。
"Opaque windowless"和"Transparent windowless"都可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的HTML 层可以透过该部分显示出来，而"opaque"则不会显示。
如果忽略此属性，默认值为 Window。仅适用于object。
Window速度快、有效率，但无法使用z-index，也没有办法混用于DHTML图层当中，这就是为什么常有人在抱怨自己的下拉菜单跑到Flash后面。
Opaque除了可以让你正确控制z-index的样式，也可以透过Javascript來控制它的大小或是移动swf的位置！不过要注意，Opaque的背景可是没有办法透明的，也就是说，任何內容都会被放在swf下面。
至于Transparent，想当然，就是把flash的背景变成透明。让swf档案可以融入网页当中而不会出现讨厌的白底，不过，transparent在IE里面是真的透明，也就是说，下面的网页內容是可以被选取起來的，但是在FF里面，就很讨厌了，因为虽然看起來透明，但是滑鼠卻无法点选。另外，要稍微注意的是，使用这个值，会让你的flash影片变得比较慢！
找到原因了我们就来解决问题：
一、设置flash为透明：但是如果你在DW中插入动画，再加<param name="wmode" value="transparent">是不生效的。要把整个的flash插件代码换成如下：
<object type="application/x-shockwave-flash" data="http://www.konnech.cn/2/images/banner.swf" width="560" height="210">
<param name="movie" value="http://www.konnech.cn/2/images/banner.swf" />
<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="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="560" height="210">
<param name="movie" value="http://www.konnech.cn/2/images/banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque">
<embed src="http://www.konnech.cn/2/images/banner.swf" wmode="opaque" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="560" height="210"></embed>
</object>
#2楼发布者：superadmin时间：2009-02-11 10:56:56
当一个网页的中既加入了弹出DIV效果，也有flash影片时，就会出现弹出层被flash挡住，这时候就需要将flash权重降低，至于网页的最底层，而且flash必须设置成透明，否则仍然会遮住，代码如下：
<div style=”z-index:-1;padding-top:10px; text-align:center; border:0;”>// 这里设置Z-index= -1将包含flash的层至于最底层
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”1003″ height=”490″
codebase=”http://fpdownload.macromedia.com ... current/swflash.cab”>
<param name=”movie” value=”wall2.swf” />
<param name=”quality” value=”high” />
<param name=”bgcolor” value=”#000000″ />
<param name=”allowScriptAccess” value=”sameDomain” />
<embed src=”wall2.swf” quality=”high” bgcolor=”#000000″
width=”1003″ height=”490″ name=”wall2″ align=”middle”
play=”true”
loop=”false”
quality=”high”
wmode=”Opaque” // 这里设置针对firefox的透明效果
allowScriptAccess=”sameDomain”
type=”application/x-shockwave-flash”
pluginspage=”http://www.adobe.com/go/getflashplayer”>
</embed>
<param name=”wmode” value=”Opaque”> // 这里设置针对IE的透明效果
</object>
</div>
<div style=”z-index:-1;padding-top:10px; text-align:center; border:0;”>// 这里设置Z-index= -1将包含flash的层至于最底层
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”1003″ height=”490″
codebase=”http://fpdownload.macromedia.com ... current/swflash.cab”>
<param name=”movie” value=”wall2.swf” />
<param name=”quality” value=”high” />
<param name=”bgcolor” value=”#000000″ />
<param name=”allowScriptAccess” value=”sameDomain” />
<embed src=”wall2.swf” quality=”high” bgcolor=”#000000″
width=”1003″ height=”490″ name=”wall2″ align=”middle”
play=”true”
loop=”false”
quality=”high”
wmode=”Opaque” // 这里设置针对firefox的透明效果
allowScriptAccess=”sameDomain”
type=”application/x-shockwave-flash”
pluginspage=”http://www.adobe.com/go/getflashplayer”>
</embed>
<param name=”wmode” value=”Opaque”> // 这里设置针对IE的透明效果
</object>
</div>