CSS: 讓圖片蓋在 Flash Player 上面(使用 z-index)

要讓圖片能浮在 Flash 上面, z-index 怎麼設都沒用, 都會被 Flash 蓋掉.

Flash 設法

先來看 Flash, 網站上要秀 swf 檔有兩種設法:

1. 傳統 <object> + <embed> 包 swf 檔
2. 官方(Adobe)建議: Adobe - Developer Center : 因應宣佈的瀏覽器變更為具備動態內容的網站做好準備, 盡量使用他提供的 AC_RunActiveContent.js 和C_ActiveX.js 來秀 swf 檔, 並另外用 <noscript> 將原本的 <object><embed> 包進來(以防使用者把 Javascript 關閉的狀況).

Adobe 提供的 JS 檔下載可見: activecontent_samples.zip, 摘錄網站上的說明:

• AC_RunActiveContent.js: 您可使用此檔案來解決「外部 JavaScript 解決方案: 適用動態內容的多種情況」中所述的 Flash 和 Shockwave 內容問題。
• AC_ActiveX.js: 您可使用本檔案來解決「其他動態內容類型的解決方案」一節所述的問題。
• SampleActiveContent.html: 本檔案提供程式碼範例, 當您在使用 AC_RunActiveContent.js 和 AC_ActiveX.js 檔案時, 可用於 HTML 網頁中。

詳細設法可抓取 zip 檔後, 看 SampleActiveContent.html 即可.(若不用 ActiveX, 可以不用載入 AC_ActiveX.js)

CSS z-index 屬性

再來看 CSS, CSS 的 z-index 屬性: CSS z-index Property, z-index 是數值越大浮在頁面上的越上面, 但是 z-index 只能在使用 position(CSS Positioning) 的範圍內才有效(ex: position:absolute/relative/fixed 等).

上面的 Flash 兩種設法都設, z-index, position 都設進去, 但是要將圖片蓋在 Flash 上, 怎麼都蓋不上去.

正好看到一篇 z-index 的文章(Give Me Some Zzzzz’s), 也有人有問此問題(看下面的留言找 Flash 就會看到), 原來是要對 Flash 著手, 一直對 z-index 找資料, 真是找錯方向了. Orz..

主要解法如下:

針對 <object>/<embed> 的設法:

• 於 <object> 內加 <param name="wmode" value="transparent">, ex: <object>.... <param name="wmode" value="transparent"> ...</object>
• 於 <embed> 內加 wmode="transparent" 參數, ex: <embed wmode="transparent" ....>

針對 AC_RunActiveContent.js 的設法:

• 於 AC_FL_RunContent() 多加 'wmode', 'transparent' 的參數, ex: AC_FL_RunContent(.... 'wmode', 'transparent' ...);
• <noscript> 內, 應該最好也要加如上述 <object>/<embed> 的參數.

WMODE 的參數解釋可參考: Flash, DHTML Menus and Accessibility 這篇, 下面節錄 Window, Opaque, Transparent 的說明:

• Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance.(Default Mode: 動畫效能最好)
• Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don't need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through.(用 JS 移動 或 Resize, 不需要設定穿透性的背景, 此模式會讓背景的東西藏在 Flash player 後面)
• Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.(可讓 HTML/DHTML 的背景圖 或 Flash player 後面的圖片、背景圖 或 Layer 都能穿透 Player 秀出來).

參考

• Flash content and z-index : 有圖文並茂的說明 
• Z-Index and Flash : 這個範例寫的比較完整
• SWFObject: Javascript Flash Player detection and embed script

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活. 檢視「Tsung」的全部文章