解決 Flash 蓋住彈出目錄的方法(转载)

 

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

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

將滑鼠移到這裡	將滑鼠移到這裡

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

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

<script type="text/javascript" src="images/swfobject.js"></script>
<div id="flashcontent">無法播放 Flash 時替代的文字內容</div>
<script type="text/javascript">
     var fo = new FlashObject("images/flash.swf", "mymovie", "200", "200", "7", "#ff00ff");
     fo.addParam("wmode", "transparent");
     fo.write("flashcontent");
</script>

步驟是先連結 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'