PCTOP 銓尹行銷顧問有限公司 CHYUANYIIN 的談天說地溫馨小窩

[轉載自]http://ezcshi.pixnet.net/blog/post/25515486-div%E5%9C%96%E5%B1%A4-%E8%A2%AB-flash-%E8%A6%86%E8%93%8B%E8%A7%A3%E6%B1%BA%E6%96%B9%E5%BC%8F

·                    
Jan 22 Thu 2009 15:59

·                    
DIV圖層 被 Flash 覆蓋解決方式

ok，這篇單純是因為google下的關鍵字第一篇找不到能夠直接用的，就找自己已經完成可用的方式做個紀錄。

前面幾篇過於冗長，不必要的資料太多了..

基於有點批評，就不說我下了什麼關鍵字了。 （或許是關鍵字下的太精簡？）



照例一行關鍵字：DIV、CSS、z-index、flash、swf、圖層、覆蓋、被蓋住、遮住、absolute



相信網頁設計者會碰到使用flash時，將原本在其上的圖層蓋住，而這篇文章就是講解如何將其恢復到正常的圖層位置。



通常在越上方的圖層會將下方的圖層蓋住。



例如：



<div id="top">我是上方圖層</div>

<div id="banner">我是banner圖層</div>



正常情況下top圖層若使用 position:absolute; ，則在相同位置時，top的資料會蓋住下方的banner圖層。

但flash通常都會浮在最上方，跳脫了原本的層次，所以下面將講解如何處理。



處理方式為將置入的object（物件）標籤 embed加入個參數 wmode="transparent" 即可。

保險的話在加入 <param
name="wmode" value="transparent"> ，並在css上方div圖層加入z-index:10，而下方div則加入z-index:1。





看不懂對不對？ 沒錯，google第一頁的就是這樣，不清不楚的。

下面例子：（使用meebo的meebo me做示範）

環境解釋：top圖層放圖片、banner圖層放flash檔。





原始：



<div id="top"><img src="logo.png"
alt=""logo" " href="#"  /></div>

<div id="banner">

　　<object
width="190" height="275" >

　　　　<param
name="movie" value="http://widget.meebo.com/mm.swf?"/>

　　　　<embed
src="http://widget.meebo.com/mm.swf?"
type="application/x-shockwave-flash" width="190"
height="275"></embed>

　　</object>

</div>





增加部份：（使用粗體橘字）



<div id="top"><img src="logo.png"
alt=""logo" " href="#"  /></div>



<div id="banner">



　　<object
width="190" height="275" >



　　　　<param
name="movie" value="http://widget.meebo.com/mm.swf?"/>

　　　　<param
name="wmode" value="transparent">



　　　　<embed  wmode="transparent"  src="http://widget.meebo.com/mm.swf?"

type="application/x-shockwave-flash" width="190"

height="275"></embed>



　　</object>



</div>





------------手工分隔線-------------



簡單來說只需要在 object 標籤內加入 <param name="wmode"
value="transparent">

並在embed標籤內，認src參數，在其加入 wmode="transparent" 即可。



而加入後也會有flash背景透明的效果。





css部份的話，可以用此方式：（也是用上方的top跟banner例子來舉例。）



連結/匯入方式



#top {

position:absolute;

z-index:10;

}



#banner{

position:absolute;

z-index:1;

}



z-index上只要數字越大，圖層將會在越上面。下方的圖層則會被上方的遮住（若為同一位置的話）。







HTML內方式



<div id="top" style="position:absolute; z-index:10;" ><img
src="logo.png" alt=""logo" " href="#" 
/></div>

<div id="banner" style="position:absolute; z-index:1;" >
.... 後面省略





------------------------------------

後記：



因為meebo me
widget的標題不能使用中文，本來打算使用gif檔用圖層方式覆蓋，但若使用了 wmode="transparent" ，則無法輸入中文，所以只能作罷。



以上

因為google第一頁沒辦法直接處理所以發文 XD