隨筆-140 評論-11 文章-131 trackbacks-0

若選擇了“窗口”，則輸出的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插件代碼換成如下：

對比一下，和DW自動生成的代碼是有區別的，測試過，IE　FF　均可以。

第二種方法：

設置flash置底，加個代碼：<param name="wmode" value="opaque" />

但是只加這個代碼，IE可行，在FF下，失效。要想在FF下起作用，還要用在<object　里加個　wmode="opaque" ，實例代碼如下：

另外一種方法是：

將flash object 改變

posted on 2009-10-12 14:28 becket_zheng 閱讀(3508) 評論(2) 編輯收藏所屬分類: web前端開發

評論:

# re: 解決下拉菜單會被swf文件遮住的問題 2012-03-17 17:44 | qq2293502086

好文章，作者的水平太高了。。。回復更多評論

# re: 解決下拉菜單會被swf文件遮住的問題 2016-04-07 10:00 | beiwei32

厲害發帖人！謝謝！回復更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: JQuery插件匯總 js-window對象的方法和屬性資料 RTree Dtree+Jquery動態生成樹節點 JQuery安裝與智能感應支持jQuery版本vsdoc.js的智能提示的VS2008 SP1補丁下載在JS文件使用Google Analytics谷歌分析的統計代碼 JavaScript - 設計模式（簡單工廠和工廠模式） 5個有趣的IE瀏覽器地址欄JavaScript代碼 asp.net “從客戶端檢測到有潛在危險的Request.Form值” 處理辦法（轉）

<

2025年6月

>

日

一

二

三

四

五

六

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

常用鏈接

留言簿

隨筆分類(138)

隨筆檔案(134)

文章分類(77)

文章檔案(109)

email

ebecket@163.com
Email:ebecket@163.com
scottgu牛博
返還網

常去的Blog

前途無量
葉榮添
莊家與散戶中金Blog