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
- Jan 22 Thu 2009 15:59
DIV圖層 被 Flash 覆蓋解決方式
close
全站熱搜
留言列表