让层(div)覆盖在flash之上

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

看看代码:

<div>
  <div style="position:absolute; width:970px; height:589px; z-index:10;background:url(http://www.baidu.com/img/baidu_jgylogo1.gif);" id="wai">
    <a href="#" style="display:block; width:100%; height:100%; text-indent:-999px;" οnclick="wai.style.display='none';"></a>
  </div>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="leoplayer" width="970" height="589">
    <param name="movie" value="imgs/leoplayer.swf"/>
    <param name="quality" value="high"/>
    <param name="AllowScriptAccess" value="always"/>
    <param name="allowFullScreen" value="true"/>
    <param name="flashvars" value="videopath=/movie/11808.flv"/>
    <param name="wmode" value="transparent">
    <embed flashvars="videopath=/movie/11808.flv" wmode="transparent" src="imgs/leoplayer.swf" quality="high" width="970" height="589" allowFullScreen="true" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
  </object>
</div>

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