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