FLASH上加链接及其挡住浮动图片的解决方法

我们平时在很多网站上都可以看到有一些广告或公告性质的图片需要在网页前端浮动，但一般如果在页面上加上FLASH上后就有可能把这个浮动图片给挡住了，今天在做三公仔的项目时也遇到这个问题，一般的解决方法是：给该FLASH添加一透明属性就可以，<param name="wmode" value="transparent"/>(这个针对IE浏览器，但在FIREFOX下有问题），为了支持FIREFOX还要给它设置一个vmode属性值为wmode="transparent"：<embed src="*.swf" wmode="transparent" ....></embed>;

写这篇日志时也在网上搜了一下相关的文章，发现还有其他一些解决方法，如通过JS等来控制，另外有个小例子比较有趣，主要是通过设置添加一张透明图片并设置图片所在图层的margin-top  为上层FLASH高度的负值来定位，从而通过给图片添加链接以达到不用修改FLASH而给它添加链接的效果，尽管通过JS可以达到相同的效果，但通过JS进行跳转的链接不利于SEO：

    1<div style="z-index:-1">
　2　　　 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="468" height="60">
　3　　　　　　　 <param name="movie" value="**.swf">
　4　　　　　　　 <param name="quality" value="high">
　5　　　　　　　 <embed src="*.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="60"></embed>
　6　　　　　　　 <param name="wmode" value="transparent">
　7　　　 </object>
　8</div>
　9<div id="masker" style="cursor: hand; margin-top:-60px; width:468px; height:60px; z-index:1; visibility: visible;"><a href="http:www.youiyou.net"><img src="blank.gif" width="468" height="60" border="0" /></a></div></div>
 

要想具有<a href...>的所有原生特征，最完美的要领应该就是用一个透明的<a href=...>链接盖住flash,最后作者采用了以上的代码，用一张带链接的大透明图盖住flash，将flash放到了一个z-index为-1的层中，同时配置了wmode属性（代码中的 wmode="transparent" 和<param name="wmode" value="transparent">如前所述，分别在firefox和ie下起作用）。masker层是用来挡住flash所在层的，margin-top用到定位。blank.gif是一个透明的图片。这个方法在兼顾SEO效果的同时很好的解决了问题，漂亮！

作者：伍锐锋(ken wu)
原载：网络百科：十万个为什么
版权所有，转载时必须以链接形式注明作者和原始出处及本声明。