弹出层与embed及svg生成的图形遮盖问题

 今天在做网页的时候，我想在flash上放一个层，然后放图片等内容，可是总是被flash遮挡，因此总结了一下
 对于这方面的问题的几个解决方法，希望可以对朋友和自己有帮助！ 

 
 1.flash把层遮挡住了，如何处理呢？
 ================================================================== 

 在flash里面加两个参数：
 < param name=" wmode"  value=" transparent" >  
 < param name=" wmode"  value=" opaque" >  

 说明：
 < param name=" wmode"  value=" transparent" >  flash将透明
 < param name=" wmode"  value=" opaque" >  flash仍将保持不透明 

 flash的例子： 

 
 < 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=" 760"  height=" 80" > 
 < param name=" movie"  value="  http://ad.1m1m.com/adfiles/200774817589544.swf " > 
 < param name=" quality"  value=" high" > 
 < embed src="  http://ad.1m1m.com/adfiles/200774817589544.swf "  quality=" high"  pluginspage="  http://www.macromedia.com/go/getflashplayer "  type=" application/x-shockwave-flash"  width=" 760"  height=" 80" > < /embed> 
 < param name=" wmode"  value=" transparent" >  
 < param name=" wmode"  value=" opaque" > 
 < /object> 
 2.如果是弹出的层< div> < /div>  被< select>  下拉列表所阻挡，有2个方法可以解决！

 ==================================================================
 方法一： 

 < iframe> 可以遮挡住< select> 。所以要使层能够遮挡住下面的列表，只要在层中加入一个和层相同大小的< iframe> 就可以了。
 具体做法如下：
 < div> 
 < !--//原来的内容//--> 
 < iframe width=" 100"  height=" 100"  style=" position:absolute  top:0px  z-index:-1  border-style:none " > < /iframe> 
 < /div> 
 这个方法对于透明的或外形不规则的层无效。原因很简单，< iframe> 是方的，最大的应用我想就是菜单了。用这种方法，再也不会出现菜单被列表破坏的尴尬了。 

 
 方法二： 

  

 < script language=" javascript" >  

 var ie55up = isie55up() 
 var overiframe = null  

 function divover(objid)
 {
 var obj = document.all[objid] 
 // 只有ie5.5以上iframe的z-index才有效
 if (ie55up)
 {
 if (overiframe == null)
 {
    overiframe = document.createelement(" < iframe src=' about:blank'  style=' position:absolute left:0 top:0 z-index:998 display:none'  scrolling=' no'  frameborder=' 0' > < /iframe> " ) 
 }
 document.body.insertadjacentelement(" beforeend"  overiframe) 
 with(overiframe.style)
 {
    top = obj.style.top 
    left = obj.style.left 
    width = obj.offsetwidth 
    height = obj.offsetheight 
    display = ' block'  
 }
 obj.style.zindex = " 999"  
 }
 else // 隐藏被id为objid的对象（层）遮挡的所有select
 {
 var sels = document.getelementsbytagname(' select' )  
 for (var i = 0  i <  sels.length  i++) 
     if (obj1overobj2(document.all[objid]  sels[i]))
    sels[i].style.visibility = ' hidden'            
 }
 } 

 //判断obj1是否遮挡了obj2
 function obj1overobj2(obj1  obj2)
 {
 var pos1 = getposition(obj1) 
 var pos2 = getposition(obj2) 
 var result = true  
 var obj1left = pos1.left - window.document.body.scrollleft  
 var obj1top = pos1.top - window.document.body.scrolltop  
 var obj1right = obj1left + obj1.offsetwidth  
 var obj1bottom = obj1top + obj1.offsetheight 
 var obj2left = pos2.left - window.document.body.scrollleft  
 var obj2top = pos2.top - window.document.body.scrolltop  
 var obj2right = obj2left + obj2.offsetwidth  
 var obj2bottom = obj2top + obj2.offsetheight 

 if (obj1right < = obj2left || obj1bottom < = obj2top || 
       obj1left > = obj2right || obj1top > = obj2bottom) 
     result = false  
 return result  
 } 

 // 获取对象的坐标
 function getposition(obj) 
 {
 for (var sumtop=0 sumleft=0 obj!=window.document.body sumtop+=obj.offsettop sumleft+=obj.offsetleft  obj=obj.offsetparent) 
 return {left:sumleft top:sumtop}
 } 

 // 是否ie5.5以上版本
 function isie55up () {
 var agt = navigator.useragent.tolowercase() 
 var isie = (agt.indexof(" msie" )!=-1) 
 if (isie)
 {
 var stiever = agt.substring(agt.indexof(" msie " ) + 5) 
 var veriefull = parsefloat(stiever) 
 return veriefull > = 5.5 
 }
 return false 
 } 

 < /script>  

 < script> 
     window.onload = function(){divover(" div1" )}
 < /script>  

 < div style=" position: absolute left:10px top:20px width:200px height:85px border:1px solid red "  id=" div1" > 
 看看现在这个层下面的select不是简单的隐藏了：）
 < /div> 
 < select name=" " > 
 < option> test1< /option> 
 < option> test2< /option> 
 < option> test3< /option> 
 < /select> 
 < p />  

 
 < select name=" " > 
 < option> test1test1test1test1test1test1test1test1test1test1test1test1test1test1< /option> 
 < option> test2< /option> 
 < option> test3< /option> 
 < /select> 
 < p />  

 
 < select name=" " > 
 < option> test1< /option> 
 < option> test2< /option> 
 < option> test3< /option> 
 < /select> 
 < p />  

 http://www.cnblogs.com/joejoe/archive/2008/10/06/829111.html 这个哥们写的不错 

 用了< param name=" wmode"  value=" transparent" >  
         < param name=" wmode"  value=" opaque" >    这两个属性迎刃而解 

 为什么会被遮住呢？查了一下 

 由于embed标签的显示层高于div等其他页面元素 因此会被其遮盖. 

 一般通过隐藏embed标签的方法来防止遮盖. 

  

 昨天在做一个调研时发现 可以直接 设置 embed 标签的 wmode=’ transparent’ 属性 这样就可以使弹出层遮盖住 

 flash了.(该属性一般的作用是使flash透明 即可以使flash下面的背景透出来 前提是flash自身是透明的) 

 这个问题解决的方法还要在css里设置一个背景 这样弹出层的时候flash透明 背景出现那张图片 ok了~ 不过就不会动了== 

  

 ========================================

 fusioncharts组件生成的flash遮挡div的解决办法 

 在使用fusionchart的时候，生成的flash上会产生层遮挡问题

 解决的办法是修改fusionchart.js文件

  //set background color
  if(c) { this.addparam(' bgcolor'   c)  }
  
  //set quality 
  this.addparam(' quality'   ' high' ) 

 
  this.addparam(' wmode'   ' transparent' ) //这个是需要添加的
  
  //add scripting access parameter
  this.addparam(' allowscriptaccess'   ' always' ) 

同时在生成图形的对象中添加

chart.addParam("wmode","Opaque");

引用

<param name="WMODE" value="transparent"> 

<param name="wmode" value="Opaque"> 

<param name="wmode" value="Window"> 

NOTE: 支持其它浏览器(firefox opera etc.) 则使用 <embed wmode="transparent" />在embed节点中加入wmode值. 

window 模式 

默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只 是貌似显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮 住位置与他重合的所有DHTML层。 

但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上，但当flash影片播放时会出现比较诡异的现象，比如DHTML层像被flash刮掉一块一样显示异常。 

Opaque 模式 

这是一种无窗口模式，在这种情况下flash player没有自己的窗口句柄，这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可 以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。 

Transparent 模式 

透明模式，在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象，同样你也可以使用z-index来控制flash影片的 深度值，但是与Opaque模式不同的是这样做会降低flash影片的回放效果，而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。 

了解了各种模式的实现方式和意义在以后的开发中就可以按照具体情况选择设置wmode属性的值了。