手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

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

首页 > Javascript >

本文来自博客园,原理,我感觉和我以前写的很象。。。我写的如何用DIV挡住SWF?差不多也是这个意思吧?

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

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

 

XML/HTML代码
  1. <a href="http://www.youiyou.net">  
  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" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="60"></embed>  
  6.     </object>  
  7. </a>  

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

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

 

XML/HTML代码
  1. <button style="width:468;height:60;background:transparent;border:0;padding:0;cursor:hand" onclick="window.location.href='http://www.youiyou.net/'">   
  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. </button>  

要想具有<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是一个透明的图片。效果如下所示,
大小: 14.94 K
尺寸: 500 x 58
浏览: 1790 次
点击打开新窗口浏览全图
title,鼠标手形均正常

XML/HTML代码
  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>  
原文是博客园的dbgeng写的,地址为:http://www.cnblogs.com/dbgeng/archive/2009/06/27/1512320.html



本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: div, flash

« 上一篇 | 下一篇 »

只显示10条记录相关文章

如何用DIV挡住SWF? (浏览: 30304, 评论: 0)
JS模拟FLASH效果 (浏览: 23859, 评论: 0)
三个网页配色FLASH,绝对的收藏品哦 (浏览: 23279, 评论: 1)
暴风影音引发的flash不能显示等故障 (浏览: 21065, 评论: 0)
推荐:Flash与3D编程探秘 (浏览: 20892, 评论: 0)
JS实现的街头霸王 (浏览: 19661, 评论: 1)
常用函数:copyToClipboard (浏览: 19442, 评论: 0)
如何禁用flash (浏览: 17995, 评论: 0)
关于div行高的巨细问题(如何设置 div 的最小高度) (浏览: 17976, 评论: 0)

2条记录访客评论

如果这个FLASH是现成的呢。如果没人会改呢?
这个东西就是必要的了。

Post by gouki on 2009, July 13, 10:29 AM 引用此文发表评论 #1

倒不如直接在FLASH里面加事件了 点击打开链接

Post by roln.cn on 2009, July 13, 9:34 AM 引用此文发表评论 #2


发表评论

评论内容 (必填):