J2EE社区

苟有恒,何必三更起五更眠;
最无益,只怕一日曝十日寒.
posts - 241, comments - 318, trackbacks - 0, articles - 16

将DIV层置于Flash之上

Posted on 2011-04-05 18:36 xcp 阅读(5201) 评论(0)  编辑  收藏 所属分类: JQuery

今天的工作重点几乎都放在这个题目上面了。因为主管希望flash的容量尽量少,所以不让我在里面放按钮,可是有要我在网页里面放,在同一个地方。。。

试了好久,发现搜索的关键词句用错了,两个div层很容易就把它们重叠在一起了,但当其中一个放的是flash时,却发现无论怎么弄都是flash在上面,挡住了我要显示的字。在经历无数次的失败之后,终于找到了一个成功帮了我的方法,以下是我转载过来的,收藏起来~~

在公司主页上放了一个浮动广告式的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”参数应该会好一些,不过,我们实在不愿意再试

用了上面的方法后我用IE一测试就发现行了,成功了。可是我们主管很强调兼容的问题,所以我每做一个任务都要在IE和FF里分别看是不是符合要求。结果~~~在FireFox里面竟然没反应啊~!!!!我郁闷啊。。。于是耗了好长好长好长好长的时间。。。。后来连全英的网站都看了。。。终于发现。。。是自己太蠢了。。。只改了tag那里的属性,却没有在embed那里也加上这个属性的修改。。。

一加上以后…………可以了……IE和FF都可以看到和用到那些字和超链接了……汗死……任务完成……



http://hi.baidu.com/00fei/blog/item/1cd8a5005463c805728da531.html


名称: ♪4C.ESL | .↗Evon
口号: 遇到新问题♪先要寻找一个方案乄而不是创造一个方案こ
mail: 联系我