Raindan 2011-10-12
web前端div层被flash层遮盖新思路解决方案:
百度,google大批量千篇一律的“div层被flash层”解决方法,都不能解决问题。
要求是点击flash区域产生一个点击事件,flash没有点击事件,又flash总是在div之上,不能点击到div层。经指点:一个flash动画div,一个透明图片div,把图片div重叠到flash的div之上,这样效果就实现。
注意几个方面:1.div重叠;2.设置图片为透明3.wmode属性
关于wmode属性资料:
(可选)允许使用InternetExplorer4.0中的透明Flash内容、绝对定位和分层显示功能。此标记/属性仅在带有FlashPlayerActiveX控件的Windows中有效。
"Window"在Web页上用影片自己的矩形窗口来播放应用程序。"Window"表明此Flash应用程序与HTML层没有任何交互,并且始终位于最顶层。
"Opaque"使应用程序隐藏页面上位于它后面的所有内容。
"Transparent"使HTML页的背景可以透过应用程序的所有透明部分显示出来,并且可能会降低动画性能。
"Opaquewindowless"和"Transparentwindowless"都可与HTML层交互,从而允许SWF文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明,因此,如果SWF文件的某一部分是透明的,则SWF文件下方的HTML层可以透过该部分显示出来,而"opaque"则不会显示。
个人代码如下:
<!--公益,企业宣传--> <div style="position:relative"> <div id="ad" style="position:absolute;left:0px; top:0px; width:700px; height:66px;z-index:-1" > <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="700" HEIGHT="66"> <param name="movie" value="images/fh3-1.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent"/> <EMBED wmode="transparent" src='images/fh3-1.swf' quality='high' WIDTH='700px' HEIGHT='66px' TYPE='application/x-shockwave-flash' pluginspage="http://www.macromedia.com/go/getflashplayer" id='ad'></EMBED> </object> </div> <div id='adImg' style="position:absolute;cursor:pointer;left:0px; top:0px; width:700px; height:66px;z-index:1;filter:Alpha(Opacity=0)"> <img onClick="toantherUrl()" src="images/ad.jpg"/> </div> </div> <!--公益,企业宣传结束-->