HTML 内嵌 swf 之 z-index 操作
方法一:
加上这样一句话:
<param name="quality" value="high">
<param name="wmode" value="Opaque">
或者这样:
<embed src="images/new.swf" quality="high" wmode="Opaque" width="" height=""></embed>
在做web开发中可能会遇到flash遮挡页面中元素的情况,无论怎么设置flash容器和层的深度(z-index)也无济于事,现有的解决方案 是在插入flash的embed或object标签中加入”wmode”属性并设置为wmode=“transparent”或”opaque”,但 wmode属性到底是什么意义,为什么可以解决这个问题呢?
window 模式
默认情况下的显示模式,在这种模式下flash player有自己的窗口句柄,这就意味着flash影片是存在于Windows中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以flash只 是貌似显示在浏览器中,但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面,这就导致默认显示方式下flash总是会遮 住位置与他重合的所有DHTML层。
但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上,但当flash影片播放时会出现比较诡异的现象,比如DHTML层像被flash刮掉一块一样显示异常。
Opaque 模式
这是一种无窗口模式,在这种情况下flash player没有自己的窗口句柄,这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可 以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。
Transparent 模式
透明模式,在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象,同样你也可以使用z-index来控制flash影片的 深度值,但是与Opaque模式不同的是这样做会降低flash影片的回放效果,而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。
“Opaque windowless”和”Transparent windowless”都可与 HTML 层交互,从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于”Transparent”允许透明,因此,如果 SWF 文件的某一部分是透明的,则 SWF 文件下方的 HTML 层可以透过该部分显示出来,而”opaque”则不会显示。
使用embed 这种标签插入FLASH的话用上面的方法在FF里无效,解决办法就是使用最新的插入FLASH的方法–用JS插入;使用DW CS3插入FLASH时会自动产生这段代码 并附带一个JS–AC_RunActiveContent.js;然后调用AC_FL_RunContent函数;例:
<script type="text/javascript">
AC_FL_RunContent( 'class','flash','codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0',
'width','960','height','590','src','images/welcome','quality','high','pluginspage',
'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/welcome','wmode','transparent' );
//end AC code
</script>
方法二:
<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' width='500' height='470' id='envent1' align='middle'>
<param name='allowScriptAccess' value='sameDomain' />
<param name='allowFullScreen' value='false' />
<param name='movie' value='http://www.58mb.com/archiver/C://羊村反击.swf' />
<param name='quality' value='high' /><param name='wmode' value='transparent'>
<param name='bgcolor' value='#FFFFFF' />
<embed src='http://www.58mb.com/archiver/C://羊村反击.swf' quality='high' bgcolor='#FFFFFF' width='500' height='470' name='envent1' align='middle' allowScriptAccess='sameDomain' allowFullScreen='false' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' />
</object>
参考二:
falsh设法
先来看flash,网站上要显示swf文件有两种方法:
1,传统的<object> + <embed> 显示swf文件
2, 官方(adobe)建议:尽量使用他提供的AC_RunActiveContent.js 和C_ActiveX.js 来显示swf文件,并另外用<noscript>将原本的<object><embed>包装进来,以防使用者把javascript关闭的情况。
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,图片仍然被falsh盖住,怎么都跑不到上面,后来正好看到一篇文章解决了此问题,原来是要修改flash的属性,具体方法如下:
针对<object>/<embed> 的做法:
在<object> 内加 <param name="wmode" value="transparent">, 比如: <object>.... <param name="wmode" value="transparent"> ...</object>
在 <embed> 内加 wmode="transparent" 参数, 比如: <embed wmode="transparent" ....>
针对AC_RunActiveContent.js 的做法:
在 AC_FL_RunContent() 多加 'wmode', 'transparent' 的参数, 比如: AC_FL_RunContent(.... 'wmode', 'transparent' ...);
<noscript> 内,应该最好也要加上如上述 <object>/<embed> 的参数.
Adobe 提供的 JS 文件下载地址: http://download.macromedia.com/pub/developer/activecontent_samples.zip
原文来自:雨枫技术教程网 http://www.fengfly.com
原文网址:http://www.fengfly.com/plus/view-31897-1.html
posted on 2011-08-03 09:30 破阵子 . 如是我闻 阅读(1208) 评论(0) 编辑 收藏 举报