若選擇了“
窗口”，則輸出的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 >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>
posted on 2009-10-12 14:28
becket_zheng 閱讀(3505)
評論(2) 編輯 收藏 所屬分類:
web前端開發