加载中…
正文 字体大小:

IE、火狐、谷歌浏览器下导航条下拉部分被Flash遮挡解决方法

(2011-11-24 12:54:56)
标签:

火狐浏览器

谷歌浏览器

ie浏览器

导航条

网页设计

it

分类: 网页制作

笔者写这篇博文是为了给自己一个总结,同时让遇到同样问题的朋友有幸看到这篇文章后对遇到同样的问题有一点点帮助。亏我大学还是学网页设计的,好久没有做网站了。前不久公司上司叫我给他朋友公司做个网站,他知道我是学网页设计的就问我能不能做,要求不是很高,就是个简单的HTML静态站,不需要什么后台、复杂数据库的。我就欣然答应了,一个星期吧就可以搞定。 哎,答应下来很轻松,网站做起来还是遇到不少问题,简单回忆下:

首先遇到的就是:

网站的js+css导航条下拉部分被flash遮住了。该怎么解决呢? 

下面是我在网上找的一些解决方法:

1、FLASH设置透明背景即可解决

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="225" height="20" title="">

  <param name="movie" value="top/logo.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
  <embed src="top/logo.swf" quality="high" wmode="opaque" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="225" height="20"></embed>

</object>

中间有一个  <param name="wmode" value="transparent " />这句就是设置FLASH背景透明。

或者加入<param name="wmode" value="opaque">这句是允许flash上层可以有网页的遮挡 ;

(为什么使用这个属性的详细解释可以参考网址:http://www.dreamdu.com/xhtml/tag_param/

以上这个方法应该能解决IE下的这种问题。

2、或者在Flash外面加一个DIV,设置他的Z-INDEX值。让他小于你DIV导航的Z-INDEX值,设置层的z-index数越大 越在上面 就可以盖住flash了。

3、在导航条层与flash层之间加入<div class="clear"></div> CSS里加入.clear { clear:both; }。

4、以上这样设置之后在IE(IE8)中是好了<IE浏览器是优先显示js的 >,但谷歌浏览器、火狐浏览器下导航下拉部分被Flash遮挡问题解决方法还是没找到?怎么回事呢?在网上找了很多资料都没找到答案,最后求助百度知道网友sweetyswain给我一个满意的答案。这里非常感谢在互联网上互相帮助的网友。

网友sweetyswain给的回答如下:
    不要在网页上直接写flash代码,使用js写,应当能够解决。

z-index是会没有用的,背景透明更是解决不了chrome等浏览器下这种问题

你用js写出这些代码就好了,然后不行的话,到网上找个加载swf文件的js也行。

也许你还不明白吧 没事给你具体的方法如下:

(1)把下面的js代码拷贝,写到一个文本里头,保存成ikan.js或者其他任何名字,
然后在你需要调用flash的网页里加载这个文件:
<script type='text/javascript' src="ikan.js"></script>
src里是路径

(2)把这段话<script language='javascript'>ikhan_swf("images/banner.swf",978,350,false);</script>放在你要放flash的地方,"images/banner.swf"改成你的flash的地址,978,350改成你的flash的宽度和高度这句话放在你要放flash的地方:
<script language='javascript'>ikhan_swf("images/banner.swf",978,350,false);</script>

这是js代码:
function ikhan_swf(url, width, height, allowDomain) {
 if (allowDomain = "") {allowDomain = false;}
 try {document.write('<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="' + width + '" height="' + height + '">');
  document.write('<param name="movie" value="' + url + '">');
 if (allowDomain = true) {
  document.write('<param name="allowScriptAccess" value="sameDomain"/>');}
  document.write('<param name="quality" value="high"><param name="wmode" value="transparent"><PARAM NAME="menu" VALUE="false">');
  document.write('<embed src="' + url + '" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="' + width + '" height="' + height + '" menu="false"></embed>');
  document.write('</object>');} catch(E){}
}

function IKHAN(id)
{document.write(id.innerHTML); id.id="";}

function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();}
document.onfocusin=bluring;

以上是几种解决各浏览器下导航条下拉部分被FLASH遮挡无法显示的解决方法

0

阅读 评论 收藏 转载 喜欢 打印举报
已投稿到:
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 不良信息反馈 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有