教你怎样在网页上加动画FLASH链接

文章类型:常见问题    发表2010-04-30   文章编辑:怒熊网络 · 一站式互联网+技术服务商!   阅读:356

很多情况下需要在成品FLASH加链接,修改FLASH源文件就麻烦了,那么可以试下直接在网页上加FLASH动画的链接。

要想在网页上加FLASH链接,网上也有好几种方法,比如将动画放在BUTTON里,或者在动画相关代码里加<param name='wmode' Value='opaque'>属性,个人感觉比较好用的办法是将动画透明,然后加个属性z-index比动画所在层较高的层,然后上面层放透明图片,可以直接做链接。

要解决这个问题,需先弄清如何加个层使其在动画之上,也就是说不会被动画所遮盖。下面是一个层在动画之上的案例,并在层里加了个点击链接效果。
<div style='z-index:-1'>  
<embed name='Movie1' src='banner.swf' quality='high' width=960 height=150 wmode='transparent'    type='application/x-shockwave-flash'>  
</embed>  
</div>  
<div id='topLayer' style='position:absolute; left:150px; top:100px; width:200px; height:200px; z-index:1; background-color: #009966; layer-background-color: #009966; border: 1px none #000000;CURSOR: hand;' OnClick='location.href='http://www.studstu.com''></div>

根据这方法,我们就可以在顶端层加透明图片来达到链接效果(个人感觉OnClick点击事件不是太好,FF等浏览器对其不友好),代码如下:
<div style='z-index:-1'>  
<embed name='Movie1' src='banner.swf' quality='high' width=960 height=150 wmode='transparent' type='application/x-shockwave-flash'>  
</embed>  
</div>  
<div id='topLayer' style='position:absolute; left:150px; top:50px; z-index:1;''><a href=http://www.studstu.com><img src=no.gif width=960 height=150></a></div>
具体的图片覆盖FLASH位置自己再慢慢精确调整。

其实这方法也是比较多大型网站的广告系统运用的,也包括一些网游公司的游戏宣传页面。经测试,支持IE和FF,其他的未试。如果特殊原因你不能将动画设置为透明,那就使用<param name='wmode' Value='opaque'>属性吧,但好象这种方法只支持IE。
<div  style='z-index:-1'>  
<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='banner.swf' />
<param name='quality' Value='high' />
<param name='wmode' Value='opaque'>
<embed src='banner.swf' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='960' height='150'></embed>
</object>
</div>  
<div id='topLayer' style='position:absolute; left:150px; top:50px; z-index:1;''><a href=http://www.studstu.com><img src='no.gif' width=960 height=150></a></div>

注意:将黑粗V和O改成正常字母v和o即可。