让浮动的div位于flash之上6967

在公司主页上放了一个浮动广告式的Online Support,是一个浮动层,可是在浮动到Flash上时,就会被Flash挡住,该死,无论我怎么设置Z轴都是在Flash这下,看来还是Flash动画招人喜欢啊,哈哈。
看来在CSS上是找不到什么出路了,看看Flash吧。在DW8中,对Flash的参数提供还是太少,还不如以前的FrontPage,又记不起来Flash层控制的参数了,搜吧。
功夫不负有心人,终于找到了,设“wmode”的值为“Opaque”,表示将Flash置于最底层。
点到Flash上,属性,点参数,再点那个加号添加参数“wmode”的值为“Opaque”,OK,搞定。
现在我的图片可以随便飘啦,哈哈。

试了一下,还有一种方法也可以实现,就是将Flash设为透明显示,也不会挡住浮动的层。
条件1.只适用于IE 4.0 或以上版本.
条件2.flash 和其他元素在不同的layers里,且Flash所在的层的z-index较低。
条件3.Flash 必须设定为背景透明。(wmode= transparent).
以上三项缺一不可。
<div style="z-index:-1">
<embed name="Movie1" src="1221.swf" quality="high"
width=500 height=400 wmode="transparent"
type="application/x-shockwave-flash">
</embed>
</div>
<div id="jnkcLayer" style="position:absolute; left:150px; top:100px; width:200px; height:200px; z-index:1; background-color: #009966; layer-background-color: #009966; border: 1px none #000000; visibility: visible"></div>
慎用wmode属性的Opaque参数
在制作Chat Union系统时,有一个功能暂时不打算使用Flash实现,但这个功能又必须出现在Flash中。因此考虑使用一个 <div>,让其漂浮在Flash动画上方,提供这个暂时不用Flash实现的功能。
但是默认情况下,Flash影片是处于最上层的,无法将 <div>置于其上。查阅Flash的帮助文件,发现这样一段描述:
wmode 属性/参数

Window | Opaque | Transparent
模板变量:$WM
说明
(可选)使您可以使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示的功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows 中有效。
“Window”在 Web 页上用影片自己的矩形窗口来播放应用程序。“Window”表明 Flash 应用程序与 HTML 层没有任何交互,并且始终位于最顶层。
“Opaque” 使应用程序隐藏页面上位于它后面的所有内容。
“Transparent”使 HTML 页的背景可以透过应用程序的所有透明部分进行显示,这样可能会降低动画性能。
“Opaque windowless”和“Transparent windowless” 都可与 HTML 层交互,并允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于“Transparent”允许透明,因此,如果 SWF 文件的某一部分是透明的,则 SWF 文件下方的 HTML 层可以透过该部分显示出来。
如果忽略此属性,默认值为 Window。仅适用于 object。
因此,在HTML中将 <object> 的wmode参数设成这样:
<param name="wmode" value="Opaque">
然后将一个HTML的 <div>置于Flash影片之上,测试成功。
但是,问题随之出现。许多客人在聊天室中打字的时候发现,输入法的选字框会跑到页面的左上角,而且会影响网页的排版,将Flash影片挤到下面。有时甚至无法将文字输入到Flash中。为了还原错误,我使用了多款输入法,发现微软的所有输入法都有这个问题。因为微软输入法在选字的时候都有一个虚线选择,我怀疑是这个虚线选择功能出现问题所致。
可是,不能单单怀疑微软输入法的兼容性不好。因为,同样的程序,在昨天就没有出现这个情况。和开发伙伴测试了其他输入法,发现智能ABC输入法也存在这个问题,只是在我的计算机上没有出现。
开始怀疑加入的 <div>,将其屏蔽,问题仍然存在。
继续怀疑到wmode属性的头上。删除 < param name=”wmode” value=”Opaque” > 语句,问题消失。
仔细思考,因为“Opaque” 使应用程序隐藏页面上位于它后面的所有内容,也就是说使用了这个参数之后,在网页中不是Flash位于最上而是
位于最上了,某些输入法会将焦点设定为网页中位于最上的对象(也就是 <div>中)。而这个 <div>又是使用绝对定位“漂浮”在网页上的,这就造成了输入法的选字框定位不准确,也就发生了刚才的问题了。
从帮助文件中看来,使用“Opaque windowless”参数应该会好一些,不过,我实在不愿意再试

Leave a Reply

About

Butcher WEB前端攻城湿 @重庆,不忘初心 以简驭繁~

搜索

最新评论

  1. @钟水洲博客:这东西我收... Post:
  2. 拜个早年 Post:
  3. 写的换专业,知识很全面,... Post:
  4. 太学术了,推荐读《如何阅... Post:
  5. 贵站文章写的不错哟~ Post:

赞助商

微博墙

标签

Partner

链接