如何讓Flash不遮擋HTML div元素的技巧
今天在寫一個flash廣告代碼的時候,因?yàn)閒lash自帶的鏈接,容易被當(dāng)成彈出廣告,所以做了一個div層放到flash上面,這樣鏈接都是a觸發(fā)的不會被攔截,但發(fā)現(xiàn)flash一直處于div層上面,原來flash需要加個參數(shù)才可以。
讓flash置于DIV層之下的方法,讓flash不擋住飄浮層或下拉菜單,讓Flash不檔住浮動對象或?qū)拥年P(guān)鍵參數(shù):wmode=opaque。
方法如下:
針對IE 在<object></object>內(nèi)加上參數(shù)<param name="wmode" value="opaque" />
針對FF 在<embed />內(nèi)加上參數(shù)wmode="opaque"
我們使用代碼:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>22cn</title>
- <style type="text/css">
- <!--
- body {
- position:relative;
- z-index:0;
- margin:0; padding:0
- }
- body,td,th {
- color: #333333;
- }
- *{margin:0; padding:0}
- img{ border:0}
- #jb51{ position:relative; width:300px; height:250px}
- #div1 {
- position:absolute;
- left:0;
- top:0;
- width:300px;
- height:250px; z-index:-1
- }
- #div2 {
- position:absolute;
- left:0;
- top:0;
- width:300px;
- height:250px;
- z-index:99999;
- }
- -->
- </style></head>
- <body>
- <div id="jb51">
- <div id="div1">
- <script type="text/javascript">
- document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="250">');
- document.write('<param name="movie" value="http://img.jb51.net/image/22cn_jb51net.swf" />');
- document.write('<param name="quality" value="high" /><param name="wmode" value="opaque" />');
- 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>');
- document.write('</object>');
- </script>
- </div>
- <div id="div2">
- <a href="http://i.am.cn/?s=jb51pic2" target="_blank"><img src="http://img.jb51.net/image/touming.png" width="300" height="250"/></a>
- </div>
- </div>
- </body>
- </html>
- <!-- 標(biāo)準(zhǔn)的的Flash插入
- 設(shè)置高度與寬度:
- width="400" height="400"
- 設(shè)置路徑:
- data="style/flash/001.swf" 與 value="style/flash/001.swf"
- 替代文本或替代圖片:
- <a href="" title=""><img src="" alt="" /></a> 也可以不要這段
- -->
- <object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">
- <param name="movie" value="style/flash/001.swf" />
- <a href="style/flash/001.swf"><img src="style/img/001.jpg" alt="Flash動畫" /></a>
- </object>
- <!-- 不會遮住層的Flash
- 讓Flash不檔住浮動對象或?qū)拥年P(guān)鍵屬性:
- <param name="wmode" value="opaque" />
- <embed wmode="opaque"></embed>
- -->
- <object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">
- <param name="movie" value="style/flash/001.swf" />
- <param name="wmode" value="opaque" />
- <embed wmode="opaque"></embed>
- <a href="style/flash/001.swf"><img src="style/img/001.jpg" alt="Flash動畫" /></a>
- </object>
- <!-- 透明的Flash
- 讓Flash透明的關(guān)鍵屬性:
- <param name="wmode" value="transparent">
- -->
- <object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">
- <param name="movie" value="style/flash/001.swf" />
- <param name="wmode" value="transparent">
- <a href="style/flash/001.swf"><img src="style/img/001.jpg" alt="Flash動畫" /></a>
- </object>
模板變量:$WM,(可選)允許使用 Internet Explorer 4.0 中的透明 Flash 內(nèi)容、絕對定位和分層顯示功能。此標(biāo)記/屬性僅在帶有 Flash Player ActiveX 控件的 Windows 中有效。
"Window"在 Web 頁上用影片自己的矩形窗口來播放應(yīng)用程序。"Window"表明此 Flash 應(yīng)用程序與 HTML 層沒有任何交互,并且始終位于最頂層。
"Opaque" 使應(yīng)用程序隱藏頁面上位于它后面的所有內(nèi)容。
"Transparent"使 HTML 頁的背景可以透過應(yīng)用程序的所有透明部分顯示出來,并且可能會降低動畫性能。
"Opaque windowless"和"Transparent windowless"都可與 HTML 層交互,從而允許 SWF 文件上方的層遮蔽應(yīng)用程序。這兩種選項(xiàng)之間的差異在于"Transparent"允許透明,因此,如果 SWF 文件的某一部分是透明的,則 SWF 文件下方的 HTML 層可以透過該部分顯示出來,而"opaque"則不會顯示。
如果忽略此屬性,默認(rèn)值為 Window。僅適用于 object。
欄 目:CSS/HTML
下一篇:HTML與XHTML、以及HTML4與HTML5標(biāo)簽之間的區(qū)別簡介
本文標(biāo)題:如何讓Flash不遮擋HTML div元素的技巧
本文地址:http://mengdiqiu.com.cn/a1/CSS_HTML/9707.html
您可能感興趣的文章
- 01-10通過html為FLASH加鏈接的實(shí)現(xiàn)代碼(div層)
- 01-10a標(biāo)簽中寫有文字如何隱藏文字顯示圖片兼容360模式渲染
- 01-10如何使用圖片按鈕作為重置(reset)表單按鈕
- 01-10用Meta標(biāo)簽代碼讓360雙核瀏覽器默認(rèn)極速模式不是兼容模式
- 01-10html 豎列顯示文字讓文字豎列顯示
- 01-10Html如何設(shè)置橫向?qū)Ш浇Y(jié)構(gòu)
- 01-10不可不知的HTML優(yōu)化技巧
- 01-10如何實(shí)現(xiàn)textarea中獲取動態(tài)剩余字?jǐn)?shù)的方法
- 01-10html是什么文件 html文件如何打開
- 01-10HTML如何在兩個div標(biāo)簽中間畫一條豎線


閱讀排行
本欄相關(guān)
- 04-02表格樣式css樣式,css樣式表單
- 04-02好看的字體樣式css,好看的字體樣式圖
- 04-02分頁樣式css,分頁樣式j(luò)q
- 04-02分頁樣式css,分頁樣式欄里用來定義首
- 04-02css樣式的引入,css樣式怎么引入
- 04-02css滾動條樣式,css滾動條的樣式
- 04-02css樣式引入方式有幾種,網(wǎng)頁引入css樣
- 04-02html中加入css樣式的簡單介紹
- 04-02vue中的css樣式布局,vue添加css樣式
- 04-02內(nèi)嵌樣式css,內(nèi)嵌樣式表,內(nèi)部樣式表
隨機(jī)閱讀
- 01-10C++ 類訪問控制的條件總結(jié)
- 01-10C++實(shí)現(xiàn)將數(shù)組中的值反轉(zhuǎn)
- 08-05織夢dedecms首頁調(diào)用縮略圖為背景
- 01-10bat批處理徹底隱藏文件的方法(使用
- 01-10C語言打印楊輝三角示例匯總
- 08-05dedecms織夢模板全站調(diào)用收藏數(shù)的方法
- 08-05DEDECMS點(diǎn)擊主欄目默認(rèn)顯示第一個子欄
- 08-05dedecms織夢模板編輯文檔的同時自動更
- 01-11常用的HTML富文本編譯器UEditor、CKEdi
- 01-10vue實(shí)現(xiàn)分頁加載效果