如何让div浮现在flash之上

2009-10-27 - diyidu - 网页设计 - Views

在ZB官方论坛上，看到一个叫做“thisblue.cn”的会员，仿了一款不错的CMS企业模板，很逼真也很漂亮，十分喜欢。（模仿站演示地址：http://www.aitinger.cn/blog/zblog002/，原站地址：http://searchfrontier.cn/）于是对之进行了一番测试，可惜，问题还真不少呢，其中比较突出的就是这个导航菜单与Flash互相冲突的问题。如图：

如何让div浮现在flash之上

显而易见，那个多级下拉导航菜单被flash遮挡住了。那么怎么修正呢？解决这个问题其实不难，下面我举个实例加以说明。假设该Flash在HTML中的加载代码如下：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="450" height="150" tabindex="1" title="焦点新闻幻灯片">
                    <param name="movie" value=".swf文件路径" />
                    <param name="quality" value="high" />
                    <embed src=".swf文件路径" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="450" height="150" ></embed>
</object>

如何让该flash位于导航菜单底层呢？只需加一个透明背景的属性即可，修改如下：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="450" height="150" tabindex="1" title="焦点新闻幻灯片">
                    <param name="movie" value=".swf文件路径" />
                    <param name="quality" value="high" />
                    <param name="wmode" value="transparent" />
                    <embed src=".swf文件路径" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="450" height="150" wmode="transparent"></embed>
</object>

加上wmode属性设置flash为透明背景，这样该flash就被定义在最底层了，简简单单即可让菜单浮上来。修正后效果演示，如图：

如何让div浮现在flash之上

除了上述方法外，还有其他方法也可以解决这个问题。例如运用如下代码的定义方式：

<style type="text/css">

</style>
</head>

<body>
<div id="flash">
<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="450" height="150">
    <param name="movie" value=".swf文件路径" />
    <param name="quality" value="high" />
</object>
<div id="nav"><a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" _fcksavedurl=""#"" title="页面标题">这是导航菜单代码</a></div>
</div>