[开发技巧]用div挡住flash,给flash加上链接(兼容ie+firefox,具备a链接所有属性)

问题描述:公司合作的一个酒店预订网站需要在页面上投广告,但对方给了一个flash文件,要求链接到其首页。直接在html的flash object前面加上<a href=…>,发现链接是点不动的。

解决过程:
开发人员没有意识到这个问题,写出的问题代码如下:


    
        
        
        
    

鼠标放上去是没有任何效果的,原因是默认情况下flash会被放到最高层,可能有朋友也碰到过下拉菜单被flash挡住的情况,也属于这个情况。


网上找到的解决方案是用一个透明的大button包在flash的最外层,或是用一个层盖住flash,然后定义button的onclick事件,但这种方式在firefox下工作不正常。
同时用户最关心的seo作用消失了,因为这不是一个正常的链接,是用javascript实现跳转的。


要想具有<a href…>的所有原生特性,最完美的方法应该就是用一个透明的<a href=…>链接盖住flash,最终我们采用了以下的代码,用一张大透明图链接盖住flash。
将flash放到了一个zindex为-1的层中,同时设置了wmode属性(代码中的 wmode=”transparent” 和<param name=”wmode” value=”transparent”>分别在firefox和ie下起作用)。
masker层是用来挡住flash所在层的,margin-top用到定位。blank.gif是一个透明的图片。效果如下所示,
用div挡住flash,给flash加上链接(兼容ie+firefox,具备a链接所有属性)
title,鼠标手形均正常

如果此文对您有帮助,转载请保留出处:http://www.cnblogs.com/dbgeng/

发表评论

返回顶部