如何讓Flash不遮擋HTML div元素的技巧

字號(hào):


    今天在寫一個(gè)flash廣告代碼的時(shí)候,因?yàn)閒lash自帶的鏈接,容易被當(dāng)成彈出廣告,所以做了一個(gè)div層放到flash上面,這樣鏈接都是a觸發(fā)的不會(huì)被攔截,但發(fā)現(xiàn)flash一直處于div層上面,原來(lái)flash需要加個(gè)參數(shù)才可以。
    讓flash置于DIV層之下的方法,讓flash不擋住飄浮層或下拉菜單,讓Flash不檔住浮動(dòng)對(duì)象或?qū)拥年P(guān)鍵參數(shù):wmode=opaque。 
    方法如下: 
    針對(duì)IE 在<object></object>內(nèi)加上參數(shù)<param name="wmode" value="opaque" /> 
    針對(duì)FF 在<embed />內(nèi)加上參數(shù)wmode="opaque" 
    使用代碼:
    XML/HTML Code
    1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2.<html xmlns="http://www.w3.org/1999/xhtml">  
    3.<head>  
    4.<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    5.<title>22cn</title>  
    6.<style type="text/css">  
    7.<!--   
    8.body {    
    9.position:relative;    
    10.z-index:0;    
    11.margin:0; padding:0   
    12.}    
    13.body,td,th {   
    14.    color: #333333;   
    15.}   
    16.*{margin:0; padding:0}   
    17.img{ border:0}   
    18.#jb51{ position:relative; width:300px; height:250px}   
    19.#div1 {   
    20.position:absolute;   
    21.left:0;   
    22.top:0;   
    23.width:300px;    
    24.height:250px; z-index:-1    
    25.  
    26.}    
    27.#div2 {    
    28.position:absolute;   
    29.left:0;   
    30.top:0;   
    31.width:300px;    
    32.height:250px;    
    33.z-index:99999;    
    34.}    
    35.-->  
    36.</style></head>  
    37.<body>  
    38.<div id="jb51">  
    39.<div id="div1">  
    40.<script type="text/javascript">  
    41.document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://pic02.newdu.com/uploads/202504/02/swflash4004.cab" width="300" height="250">');   
    42.document.write('<param name="movie" value="http://img.jb51.net/image/22cn_jb51net.swf" />');   
    43.document.write('<param name="quality" value="high" /><param name="wmode" value="opaque" />');   
    44.document.write('<embed src="http://img.jb51.net/image/22cn_jb51net.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="250" wmode="opaque"></embed>');   
    45.document.write('</object>');   
    46.</script>  
    47.</div>  
    48.<div id="div2">  
    49.<a target="_blank"><img src="http://img.jb51.net/image/touming.png" width="300" height="250"/></a>  
    50.</div>  
    51.</div>  
    52.</body>  
    53.</html>  
    標(biāo)準(zhǔn)的的Flash插入
    XML/HTML Code
    1.<!-- 標(biāo)準(zhǔn)的的Flash插入   
    2.設(shè)置高度與寬度:   
    3.width="400" height="400"  
    4.設(shè)置路徑:   
    5.data="style/flash/001.swf" 與 value="style/flash/001.swf"  
    6.替代文本或替代圖片:   
    7.<a href=""><img src="" /></a> 也可以不要這段   
    8.-->  
    9.<object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">  
    10.<param name="movie" value="style/flash/001.swf" />  
    11.<a href="style/flash/001.swf"><img src="style/img/001.jpg" /></a>  
    12.</object>  
    不會(huì)遮住層的Flash
    XML/HTML Code
    1.<!-- 不會(huì)遮住層的Flash    
    2.讓Flash不檔住浮動(dòng)對(duì)象或?qū)拥年P(guān)鍵屬性:   
    3.<param name="wmode" value="opaque" />  
    4.<embed wmode="opaque"></embed>  
    5.-->  
    6.<object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">  
    7.<param name="movie" value="style/flash/001.swf" />  
    8.<param name="wmode" value="opaque" />  
    9.<embed wmode="opaque"></embed>  
    10.<a href="style/flash/001.swf"><img src="style/img/001.jpg" /></a>  
    11.</object>  
    透明的Flash
    XML/HTML Code
    1.<!-- 透明的Flash   
    2.讓Flash透明的關(guān)鍵屬性:   
    3.<param name="wmode" value="transparent">  
    4.-->  
    5.<object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">  
    6.<param name="movie" value="style/flash/001.swf" />  
    7.<param name="wmode" value="transparent">  
    8.<a href="style/flash/001.swf"><img src="style/img/001.jpg" /></a>  
    9.</object>  
    wmode 屬性/參數(shù)值 Window | Opaque | Transparent 
    模板變量:$WM,(可選)允許使用 Internet Explorer 4.0 中的透明 Flash 內(nèi)容、絕對(duì)定位和分層顯示功能。此標(biāo)記/屬性僅在帶有 Flash Player ActiveX 控件的 Windows 中有效。 
    "Window"在 Web 頁(yè)上用影片自己的矩形窗口來(lái)播放應(yīng)用程序。"Window"表明此 Flash 應(yīng)用程序與 HTML 層沒(méi)有任何交互,并且始終位于最頂層。 
    "Opaque" 使應(yīng)用程序隱藏頁(yè)面上位于它后面的所有內(nèi)容。 
    "Transparent"使 HTML 頁(yè)的背景可以透過(guò)應(yīng)用程序的所有透明部分顯示出來(lái),并且可能會(huì)降低動(dòng)畫性能。 
    "Opaque windowless"和"Transparent windowless"都可與 HTML 層交互,從而允許 SWF 文件上方的層遮蔽應(yīng)用程序。這兩種選項(xiàng)之間的差異在于"Transparent"允許透明,因此,如果 SWF 文件的某一部分是透明的,則 SWF 文件下方的 HTML 層可以透過(guò)該部分顯示出來(lái),而"opaque"則不會(huì)顯示。 
    如果忽略此屬性,默認(rèn)值為 Window。僅適用于 object。