层内容被FLASH遮挡解决办法
今天在调整公司网站是发现,在视频播放的页面,分享按钮弹出推荐层会被flash播放器遮挡,给层加上z-index也不起作用,如是去google了一下,找到一些方法:
wmode属性:
“ Window ” 在 Web 页上用影片自己的矩形窗口来播放应用程序,并且始终位于最顶层。
“ Opaque ” 显示页面上位于它后面的内容。
“ Transparent “使 HTML 页的背景可以透过应用程序的所有透明部分显示出来,并且可能会降低动画性能。
“ Opaque “和” Transparent “都 可与 HTML 层交互,从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于”Transparent”允许透明,因此,如果 SWF 文件的某一部分是透明的,则 SWF 文件下方的 HTML 层可以透过该部分显示出来,而”opaque”则不会显示。
如果忽略此属性,默认值为 Window。仅适用于object。
Window速度快、有效率,但无法使用z-index,也没有办法混用于DHTML图层当中,这就是为什么常有人在抱怨自己的下拉菜单跑到Flash后面。
Opaque除了可以让你正确控制z-index的样式,也可以透过Javascript來控制它的大小或是移动swf的位置!不过要注意,Opaque的背景可是没有办法透明的,也就是说,任何內容都会被放在swf下面。
至 于Transparent,想当然,就是把flash的背景变成透明。让swf档案可以融入网页当中而不会出现讨厌的白底,不 过,transparent在IE里面是真的透明,也就是说,下面的网页內容是可以被选取起來的,但是在FF里面,就很讨厌了,因为虽然看起來透明,但是 滑鼠卻无法点选。另外,要稍微注意的是,使用这个值,会让你的flash影片变得比较慢!
方法如下:
一、设置flash置底,加个代码 :<param name=”wmode” value=”opaque” />但是只加这个代码,IE可行,在FF下,失效。要想在FF下起作用,还要用在object 里加个 wmode=”opaque” ,实例代码如下:
wmode属性:
“ Window ” 在 Web 页上用影片自己的矩形窗口来播放应用程序,并且始终位于最顶层。
“ Opaque ” 显示页面上位于它后面的内容。
“ Transparent “使 HTML 页的背景可以透过应用程序的所有透明部分显示出来,并且可能会降低动画性能。
“ Opaque “和” Transparent “都 可与 HTML 层交互,从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于”Transparent”允许透明,因此,如果 SWF 文件的某一部分是透明的,则 SWF 文件下方的 HTML 层可以透过该部分显示出来,而”opaque”则不会显示。
如果忽略此属性,默认值为 Window。仅适用于object。
Window速度快、有效率,但无法使用z-index,也没有办法混用于DHTML图层当中,这就是为什么常有人在抱怨自己的下拉菜单跑到Flash后面。
Opaque除了可以让你正确控制z-index的样式,也可以透过Javascript來控制它的大小或是移动swf的位置!不过要注意,Opaque的背景可是没有办法透明的,也就是说,任何內容都会被放在swf下面。
至 于Transparent,想当然,就是把flash的背景变成透明。让swf档案可以融入网页当中而不会出现讨厌的白底,不 过,transparent在IE里面是真的透明,也就是说,下面的网页內容是可以被选取起來的,但是在FF里面,就很讨厌了,因为虽然看起來透明,但是 滑鼠卻无法点选。另外,要稍微注意的是,使用这个值,会让你的flash影片变得比较慢!
方法如下:
一、设置flash置底,加个代码 :<param name=”wmode” value=”opaque” />但是只加这个代码,IE可行,在FF下,失效。要想在FF下起作用,还要用在object 里加个 wmode=”opaque” ,实例代码如下:
复制内容到剪贴板
程序代码
<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=”600″ height=”248″>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”allowFullScreen” value=”false” />
<param name=”movie” value=”flash/uploader.swf”>
<param name=”quality” value=”high”>
<param name=”wmode” value=”Opaque”>
<embed src=”flash/uploader.swf” wmode=”Opaque” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”600″ height=”248″></embed>
</object>
红色:解决IE下的遮住层问题。
绿色加粗:解决Firefox下的遮住层问题。
二、设置flash为透明 :但是如果你在DW中插入动画,再加<param name=”wmode” value=”transparent”>是不生效的。要把整个的flash插件代码换成如下:
复制内容到剪贴板
程序代码
<object type=”application/x-shockwave-flash” data=”http://www.w3net.cn/images/banner.swf” width=”560″ height=”210″>
<param name=”movie” value=”http://www.w3net.cn/images/banner.swf” />
<param name=”wmode” value=”transparent” />
</object>
三、
复制内容到剪贴板
程序代码
在<body>中插入 onblur=self.focus() 也就是<body onblur=self.focus()>
这个方法没有作尝试,有试过的朋友给个结果,谢。