web前端div层被flash层遮盖新思路解决方案

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>
         <!--公益,企业宣传结束-->

相关推荐