让层(div)覆盖在flash之上

在项目中遇到flash广告弹出窗口被浏览器屏蔽的情况.对AS没什么研究,所以用HTML的变通方式来快速解决此类问题.

原理很简单,就是做一个div并让它定位于flash之上,然后再在div中增加所需的跳转链接<a>.

看看代码:

<div class=”flash”>
<div style=”position:absolute; width:960px; height:150px; z-index:10; background:url(images/transparentbg.gif);”><a href=”#” target=”_blank” style=”display:block; width:100%; height:100%; text-indent:-999px;”>link</a></div>

<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=”960″ height=”150″>
<param name=”movie” value=”flash/960_150.swf”>
<param name=”quality” value=”high”>
<param name=”wmode” value=”transparent”>
<embed src=”flash/960_150.swf” quality=”high” wmode=”transparent” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”960″ height=”150″></embed>
</object>
</div>

红色的部分就是关键点:

1. 为了使z-index生效,要将容器定义为position:absolute;
2. 必须为该容器设定背景,不然div无法覆盖在flash之上,这里我用了个透明的背景图transparentbg.gif;
3. 为flash增加<param name=”wmode” value=”transparent”>,<embed wmode=”transparent”></embed>属性,这也是确保div覆盖在flash上的必要条件;

最后就是在该容器中增加链接(绿色部分)