【卜維丰】解決 Flash 蓋住彈出目錄的方法

解決 Flash 蓋住彈出目錄的方法

無論是 CSS 下拉式目錄，或是 Javascript 製作出來的彈出式清單，一旦遇到 Flash 時，就被 Flash 遮蓋住，這個問題困擾了不少設計人員，原則上有兩種解決方法，一種是在圖層中使用 IFRAME，另一種則是改變 Flash 嵌入方式。

這裡要聊的，是第二種方法，先來看看問題狀況：

將滑鼠移到這裡彈出選單1 彈出選單2 彈出選單3 彈出選單4 彈出選單5 彈出選單6	將滑鼠移到這裡彈出選單1 彈出選單2 彈出選單3 彈出選單4 彈出選單5 彈出選單6

左邊的彈出選單被 Flash 蓋住了，而右邊的彈出選單，則沒有這種情況，這兩個例子的彈出選單都是使用 CSS 製作。

先講解決方法，左邊的 Flash 使用 <object> 嵌入頁面中，<object> 物件在 HTML 規格中，還算妾身未明的物件，造成的最大問題是控制上的問題，比如這個例子，就算你把 Flash 放到圖層中，再加上 z-index 照樣把彈出選單蓋住。那怎麼辦呢？改右邊的方法，以swfobject方式嵌入，語法為：

步驟是先連結 swfobject.js 這個檔案，檔案的官方下載位置是：

swfobject_1.4.zip(40K)

壓縮檔中檔案很多，是範例及說明，要用到的只有 swfobject.js一個檔案。

然後宣告一個放置 flash 的區塊，這個例子的識別名稱為 flashcontent，接下來，建立 FlashObject 物件，語法是：

var fo=new FlashObject(swf檔,識別元,寬度,高度,Flash版本,背景色);

如果需要加其他屬性，例如透明，則使用 fo.addParam 加入，語法為：

fo.addParam("wmode", "transparent");

最後，把物件寫到 flashcontent 區塊中，語法為：

fo.write("flashcontent");

如此就完成了，原文刊載於：

http://www.adobe.com/devnet/flash/articles/swfobject.html

什麼情況造成的？

原因和網頁元件的特性有關，如果要把網頁元件分類，其中有一種分類法為：可定位(Positional)和不可定位(non-Positional)，什麼意思呢？網頁中呈現的元件，例如段落、表格等，是由 HTML 創建出來的，但部份我們熟知的元件，例如表單，卻不是由 HTML 創建出來，而是作業系統本身建立，HTML 只不過是叫過來用(call)，類似的元件還有 Java Applet、ActiveX、Flash 和一些 plug-in等。

講白一點，HTML 是一個二維空間，只上下左右的概念，有了 CSS 之後，開始有三度空間的概念，但，前述提到的這些元件，既非擺在二維空間裡，也不是擺在三度空間中，到底擺那？天知道！所以　z-index 失效，基本上，這應屬於瀏覽器的問題，這裡有一篇專文論述：

http://www.webreference.com/dhtml/diner/seethru/index.html

同樣的情況，還常見於下拉表單突破彈出選單，但這個問題，瀏覽器本身已經解決了，像 FireFox 上就不會發生，至於 IE，我就沒空想知道他們改正沒。

這算是個老問題了，199X 年時就被廣泛討論，最主要是用 Javascript 製作的動態下拉功能表被表單中的下拉清單穿透造成的，當時急壞了一些人，後來發現，用 IFRAME 這個不可定位元件來以毒攻毒可以解決這問題，原理就是把 IFRAME 放到圖層中，如此一來，管你底下是表單的下拉清單還是 Flash，一律可以蓋過去。作法就有點囉嗦，這裡就不提了。

卜維丰 6/3 07'

同意轉載，不過麻煩看一下轉載需知

添加搜藏

charlie 2009/4/9 上午 02:01:00

請問下拉式選單被下面的div蓋住該怎麼辦呢?
用z-index也沒有效說...
麻煩老師解惑

小珍 2008/12/13 下午 12:13:00

問題終於解決了~真是謝謝老師的解答^^

爆漿彈珠汽水 2008/12/8 下午 04:26:00

老師您好
在下使用了老師所說的swfobject嵌入方式來製作網頁
DIV裡的東西確實在FireFox上可以正常蓋在SWF上
但是卻遇上了另一個問題

使用swfobject的swf載入速度變慢了
連讀取外部照片與文字檔時速也慢了許多

以下為展示的網址

進入後請點選右下方聯絡我們

http://www.royalbecome.com.tw/
此網頁裡以Wmode來處理div與swf的問題,IE上沒問題,只要轉到FF上就會閃一下然後又被背在SWF下了...

http://www.royalbecome.com.tw/index2.html
此網頁裡是以swfobject嵌入方式來處理,但是讀取的速度..很明顯的慢了許多

怎麼會這個樣子呢

可以請老師解惑一下嗎?

謝謝

大感謝 2008/10/24 下午 08:15:00

感謝您的分享，我所遇到的問題解決了 : ]

schlafen 2008/7/3 下午 08:03:00

真是太感謝你了!!^__^

我發現如果引用的是C_RunActiveContent.js
設定參數wmode會讓flash不見了!!
不論給值為transparent或下顏色，flash都跑不出來
不知道這樣說正不正確

卜維丰 2008/4/27 下午 07:36:00

Ting, 這你就難倒我了
DW 產生的程式碼, 向來不太會有錯
理論上, 你這頁和首頁的功能表相同
不致於產生錯誤, 一種可能性是你自己加了程式, 其中變數名稱同
根據 FireFox 的錯誤主控台顯示
是　mm_menu.js 的 499 行 ActiveMenu.Menu 沒東西

及 568 行 l.Menu 沒東西

Ting 2008/4/27 下午 01:01:00

老師您好,第一次在這邊留言,還先謝謝您的耐心答覆嚕！
之前我幫公司做的網頁不知為何上傳之後,Menu選單凍結不會彈出了,我是用DW CS3內的下拉式選單做的,問過朋友,她說是網頁無法找到關於選單的指令所以不會動...可是我怎麼找都找不出來到底我漏掉哪個連結了...? www.opanui.com是網址,不過http://www.opanui.com/help.html這一頁就是選單不工作的一頁,還請老師您幫我解答,非常感謝！

卜維丰 2008/4/25 下午 01:17:00

Joe, 聽你的描述,
估計你有兩個圖層, 底下有個 Flash , 上層可能是透過 margin 的設定把資料靠右, 是這樣嗎?

如果是, 建議你上層圖層寬度要剛好, 用 float:right 定位

試試

Joe 2008/4/24 下午 06:30:00

老師您好，請問如何解決在ＦＦ瀏覽器ＳＷＦ上面的文字連結不能點選跟選取的問題？

我的ＳＷＦ都有設成透明的，在ＩＥ的話上面的文字連結是可以點選的，文字也可以選取，可是在ＦＦ上就不行，看的見可是點不到。。。

speedmania 2008/4/9 上午 11:52:00

謝謝，今天我剛好碰到這個問題，現在已經解決了~~超級感謝

小狼 2008/3/6 下午 09:50:00

卜老師您好：我利用透明背景的Flash來製作我的網頁，
可是我發現下層的網頁在IE會被顯示出來，
在FIREFOX等瀏覽器就沒辦法，
請問這個問題有解嗎Orz

謝謝^^

卜维丰 2008/2/19 下午 11:10:00

to 小仙,加個這行試試
fo.addParam("wmode", "transparent");

卜维丰 2008/2/18 上午 04:38:00

to 小仙,
這和 Flash Player 應該沒有直接關係喔

小仙 2008/1/25 上午 10:58:00

卜維丰老師，你好~
今天剛更新的flash player 9
發現好好的Flash 蓋住彈出目錄本來已經解決了，又開始了= ="

看您的範例也是如此，這樣該怎麼解決呢?

ps.本來好好flash player8用的好好的，真是被Adobee給搞糊塗了...

卜維丰 2007/11/29 上午 01:06:00

世倫兄,
我左瞄右瞄, 用 Netscape 9.0.0.4, FireFox 2.0.0.10, Safari 3.0.4 你講的第二層, 都能準確點選喔

世倫 2007/11/27 下午 05:20:00

卜維丰老師，您好
我也遇到類似的問題,我公司的網站, menu適用Flash寫, 再IE下一切OK, 但當用FIREFOX及SARFARI問題就來了.
FIREFOX部分:
當醫進入首頁後,會看到一個選單在最上方,滑鼠一到第一層目錄,一切ok,但當要進入子目錄時,就發生無法點選的狀況.
safari部分:
情況相同,但是發生在要進入第二層目錄時(products/road/Handalbar).
我曾式著用您上面所講的方式作,無解,可否請幫我看一下.
www.controltechbikes.com
世倫

小王子 2007/10/26 下午 05:48:00

萬分感謝卜老師的回答～
後來我用java的方式同時解決了這兩個問題，只是之前一直不希望用JAVA來解決，還是希望用純CSS的方式來完成。
今天又發生了一個問題，也想來請教一下卜老師
請看一下這是測試頁1
http://www.onstreet.com.tw/sam/samui/index01.html
左下角的「蘇美島旅遊情報」的內容文字繞圖是正常的。
然後請看測試頁2
http://www.onstreet.com.tw/sam/samui/index02.html
一旦我把字數加到超過一行，一旦斷行，文字繞圖就消失了，直接跳到圖片的下方。
我覺得只是單純的文字繞圖，怎麼會發生這樣的問題呢～所以想請教一下卜老師，我是不是有使用上的錯誤呢？

卜維丰 2007/10/26 下午 02:15:00

小王子殿下,

第二個問題, 我個人認為啦, 是 BUG (Safari for window, Opera也都一樣)

是子區塊的 margin 影響到父區塊
就你的 CSS 來看, 是 #main-col 這個 margin 造成的, 是我的話, 我會用 padding

這裡有一個測試頁

http://audi.tw/temp/2.html

有興趣的人可以看看原始檔
1.把 layer1 的 border 改成有粗細, 就正常了
2.把 layer2 的 margin 改成 padding

翻了一下 BUG LIST, 沒找到這條

卜維丰 2007/10/26 下午 01:05:00

小王子殿下,

在你的 3bod.css 中, 針對內容部份所設的 CSS , 如 #content, #menu 等等

其中 position:relative; 以目前測試頁來看, 都算多餘

position:relative 是指父層級位置定好了, 參照這個位置, 如果沒有父層級, 那 BODY 就是父層級了, 而瀏覽器依照你撰寫 <DIV> 的先後, 來決定上下關係, 後寫的, 在上層, 所以啦, 你的目錄才會被壓住

小王子 2007/10/25 下午 10:23:00

卜老師你好：
第一次到這裡留言，最近因為再鑽研CSS，所以常到你這裡來看您的範例，目前遇到了一些問題完全沒有辦法解決，所以想請你幫我看看。
以下是測試網址：http://www.onstreet.com.tw/sam/samui/index2.html

目前遇到兩個問題，第一個問題是，其實我中間的導覽列是有下拉式選單，但他卻被下一個div給蓋起來了。

第二個問題是出在用Firefox瀏覽時，導覽列跟下一個div中間會有一塊空白。

我想了好久，也爬了好久的網頁，卻一直找不到解答，希望卜老師可以幫我看看

卜維丰 2007/10/18 下午 04:38:00

橘子你好,
你應該不再需要用 IFRAME
然後, 最好有網址給我看, 會比較清楚

橘子 2007/10/15 下午 11:01:00

卜維丰老師，您好：我是用css來寫下拉式選單，flash用iframe放到div,套上老師的方式後，下拉式選單有出來，但flash卻靜止不動，只有底圖，請問可有解?謝謝！

給個回應

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容:

以下為本站文章分類清單

以下為本站側欄內容

以下為最近發表的文章

以下為本頁本文內容

解決 Flash 蓋住彈出目錄的方法

什麼情況造成的？

以下為文章回應區


	無法播放 Flash 時替代的文字內容