如何避免层被其它对象挡住

来自于：

http://www2.flash8.net/teach/3959.htm

 

我找了好多地方，只有这个文章的内容对我有帮助。

 

之前先列另一个文章出来：

 

1. 避免Flash挡住Div层的方式：增加 <param name="wmode" value="transparent">，另外增加<embed wmode="transparent" ...其他选项>
2. select和flash挡住div，可以采取移除节点的方式防止挡住
3. select和flash采用display:none的方式防止挡住
4. 在select和flash上面加一层隐藏的iframe对象，因为iframe对象跟select和flash界面显示平级，然后把目标div放在iframe上面
5. 如果是按钮、提交、图片按钮，采用 button 标签来取代input标签，其他一致

 

 

wmode="transparent" 不管用，要用 wmode 为opaque  要用下边文章中写的样子。

 

 

 

如何避免层被其它对象挡住
解决思路 ：
    根据挡隔对象的不同，解决办法也不同。
具体步骤 ：
1.被Flash挡住。
设置Flash的wmode属性值 为opaque或transparent，代码示例：

<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"><param name="movie" value="http://pepsi.flash8.net/pepsi46860.swf">
<param name="wmode" value="opaque"><param name="quality" value="high"><embed src="http://pepsi.flash8.net/pepsi46860.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="60" wmode="opaque"></embed></object>
<div style="position:absolute;left:150;top:50;width:100px;height:50px;background:green">
</div>

2.被图片挡住。
这个估计是因为图片也放在层中，而图片所在层的Z轴索引值比该层大，所以被挡住，解决办法是更改该层的Z轴索引值至比图片层大。
代码示例：

<div style="position:absolute;left:0;top:20;z-index:2;background:red;width:120px;height:70px">
1<img src="http://www.flash8.net/images/logo.gif">
</div>
<div style="position:absolute;left:50;top:50;z-index:2;background:green;width:120px;height:70px">
2<img src="http://www.flash8.net/images/logo.gif">
</div>
<div style="position:absolute;left:90;top:80;z-index:2;background:blue;width:120px;height:70px">
3<img src="http://www.flash8.net/images/logo.gif">
</div>

3.被表单控件挡住
这个目前还没有完美的解决方法，一般都是在设计排版时就尽量避免这种情况，如果是万不得已，就在层经过表单控件时让表单控件隐藏，过后再让它显示：
代码示例：

<button onClick="oSelect.style.display=’none’;oLayer.style.display=’inline’">显示层隐藏下拉选项
</button>
<button onClick="oSelect.style.display=’inline’;oLayer.style.display=’none’">显示下拉选项隐藏层</button>

<div style="position:absolute;left:0;top:50;z-index:2;background:red;width:120px;height:50px">
z-index:1<select id="oSelect"><option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1<option>1</select>
</div>
<div id="oLayer" style="position:absolute;left:30;top:60;z-index:2;background:green;width:120px;height:70px;display:none">
z-index:2<img src="http://www.flash8.net/images/logo.gif">
</div>

4.当然还有用优先级别较高的控件来代替层的方法解决，但控件并非是每台机器上都有安装，而且控件的可定制性也差，在兼容性上也存在问题。
(1)hhctrl.ocx控件：

 <OBJECT id=hhctrl type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" codebase="<I>file:</I>hhctrl.ocx#Version=4,0,0,24" width=80 height=20>
 <PARAM name="Command" value="Related Topics, MENU">
 <PARAM name="Button" value="Menu">
 <PARAM name="Item1" value="[X-Eyes];http://x-lover.com/forums/">
 <PARAM name="Item2" value="闪客之吧;http://www.flash8.net">
 <PARAM name="Item3" value="零刻联盟;http://www.linkmeng.com/">
 <PARAM name="Item4" value="蓝色理想;http://www.blueidea.com/">
 <PARAM name="Item5" value="5D多媒体;http://www.5d.cn">
 </OBJECT>
 <select></select><iframe></iframe>

(2)X-Scriptlet控件

 <object style="position:absolute;top:150;left:20;width:100;height:50;border:1px
 solid #000000" type="text/x-scriptlet" data="demo.gif"></object>
 <SELECT></SELECT><iframe></iframe>

 或

 <object style="position:absolute;top:150;left:20;width:100;height:50;border:1px solid #000000" type="text/html" data="demo.gif"></object>
 <select></select><iframe></iframe>

(3) window.createPopup()

  <SCRIPT>
 var oPopup = window.createPopup();
 function showPopupWin(){
     var oPopBody = oPopup.document.body;
     oPopBody.style.backgroundColor = "green";
     oPopup.show(50, 120, 180, 65,document.body);
 }
 </SCRIPT>
 <BUTTON onclick="showPopupWin()">显示窗口</BUTTON><select></select><iframe></iframe>

    注意：用createPopup方法打开的Popup窗口需要IE5.5以上浏览器的支持。
特别提示
本例所给代码的运行效果分别如图1.3.17~图1.3.22所示。

图 1.3.17 层与Flash的优先级别控制

图 1.3.18 层与层间的优先级别控制

图1.3.19层与表单控件的优先级别控制

图 1.3.20 HHCtrl控件与其它控件的优先级测试

图1.3.21X-Scriptlet控件与其它控件的优先级别测试

图1.3.22 Popup窗口与其它控件的优先级别测试

特别说明

本例问题的解决方式需要根据实际情况而定，一般来说用前三种方法就可以了，除非必要，否则尽量不要用后面的三种方法。

 

 

 

 

 

 

 

 

 

 

总结：

     在网上可以找到一些代码，但有些代码只能在ie 下运行，到了firefox里就变了。

 

以下是一段例子，用z轴的方式来解决问题。但不适合我们的项目。

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
*{margin:0; padding:0;}
body {background:#298DC8;color:#333;font-size:12px;font-family:Arial, Helvetica, Verdana, sans-serif;line-height:150%;}
#t-iframe{ background:#fff; position:relative; z-index:1;}
.box{ position:relative; background:#f7f7f7; border:solid 1px #f09; width:200px; height:200px;}
pre{ padding:8px; color:#f09;}
</style>
</head>
<body>
<div class="box" style="z-index:5; top:50px;">
<pre>
利用pre这个标签可以将
其包起来的文字排版、格
式，原封不动的呈现出来
。算是相当好用的标签之
一。也就是说你输入的东
西被原封不动的输出,包
括你输入的空格之类的,
不用和等来表示空格或者
回车
</pre>
</div>
<iframe id="t-iframe" scrolling="no" frameborder="0" height="300" width="100%" src="http://www.baidu.com"></iframe>
<div style="position:relative; z-index:3;">
<embed height="80" width="750" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" quality="autohigh" src="http://gg.blueidea.com/2009/hp/3/home.swf"/>
</div>
<div class="box" style="z-index:2; top:-230px;">
<pre>
利用pre这个标签可以将其包起来的文
字排版、格式，原封不动的
呈现出来。算是相当好用的标签之一。也
就是说你输入的东西被原封不动的输出,包
括你输入的空格之类的,不用和等来
表示空格或者回车了
</pre>
</div>

<div class="box" style="z-index:4; top:-220px;">
<pre>
利用pre这个标签可以将其包起来的文
字排版、格式，原封不动的
呈现出来。算是相当好用的标签之一。也
就是说你输入的东西被原封不动的输出,包
括你输入的空格之类的,不用和等来
表示ddd
</pre>
</div>
</body>
</html>

 

 

 

以下是我在项目里的代码：

 

 

<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page language="java"%>
<?xml version="1.0" encoding="UTF-8" ?>


<%
	String map_URL  = (String)request.getParameter("map_URL");
	if(map_URL == null){
		Object tempURL = request.getAttribute("map_URL");
		if(tempURL == null){
			map_URL = "com.wxxr.web.ui.config.systemConfig";//TODO test code
			//map_URL = "";
			//TODO if user not support any url system will use default url.
		}else{
			map_URL = tempURL + "";
		}
	}
	String contextPath = request.getContextPath();
%>

<!-- saved from url=(0014)about:internet -->
<html lang="en">

<!-- 
Smart developers always View Source. 

This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR. 

Learn more about Flex at http://flex.org 
// -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--  BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/history/history.css" />
<!--  END Browser History required section -->

<title></title>

<STYLE>
   #_iframe{
     position: relative;
     display: none;
         top: 20px;
         left: 30px;
         background-color: #ffffff;
         text-align: center;
         border: solid 1px;
         padding: 10px;
         z-index: 1;
   }
  
</STYLE>

<script src="<%=contextPath%>/AC_OETags.js" language="javascript"></script>

<!--  BEGIN Browser History required section -->
<script src="<%=contextPath%>/history/history.js" language="javascript"></script>
<!--  END Browser History required section -->

<script src="<%=contextPath%>/MxIframe.js" language="javascript"></script>

<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 28;
// -----------------------------------------------------------------------------
// -->
</script>
</head>

<body scroll="no">
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

if ( hasProductInstall && !hasRequestedVersion ) {
	// DO NOT MODIFY THE FOLLOWING FOUR LINES
	// Location visited after installation is complete if installation is required
	var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
	var MMredirectURL = window.location;
    document.title = document.title.slice(0, 47) + " - Flash Player Installation";
    var MMdoctitle = document.title;

	AC_FL_RunContent(
		"src", "<%=contextPath%>/playerProductInstall",
		"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
		"width", "100%",
		"height", "100%",
		"align", "middle",
		"id", "workbench",
		"quality", "high",
		"wmode", "opaque",
		"bgcolor", "#869ca7",
		"name", "workbench",
		"allowScriptAccess","sameDomain",
		"type", "application/x-shockwave-flash",
		"base","<%=contextPath%>/",
		"pluginspage", "http://www.adobe.com/go/getflashplayer"
	);
} else if (hasRequestedVersion) {
	// if we've detected an acceptable version
	// embed the Flash Content SWF when all tests are passed
	AC_FL_RunContent(
			"src", "<%=contextPath%>/workbench",
			"width", "100%",
			"height", "100%",
			"align", "middle",
			"id", "workbench",
			"quality", "high",
			"wmode", "opaque",
			"bgcolor", "#869ca7",
			"name", "workbench",
			"allowScriptAccess","sameDomain",
			"type", "application/x-shockwave-flash",
			"base","<%=contextPath%>/",
			"pluginspage", "http://www.adobe.com/go/getflashplayer",
			"flashvars","map_URL=<%=map_URL%>"
	);
  } else {  // flash is too old or we can't detect the plugin
    var alternateContent = 'Alternate HTML content should be placed here. '
  	+ 'This content requires the Adobe Flash Player. '
   	+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
    document.write(alternateContent);  // insert non-flash content
  }
// -->
</script>

<div id="_iframe">
  <DIV align=center>
	  <IFRAME id="_frame" frameBorder=0 marginwidth=0 marginheight=0 scrolling=no width=100%  height=100% scrolling=no ALLOWTRANSPARENCY="true">
	  </IFRAME>
	  <a href="javascript:iframe_close();">close</a>
  </DIV>
</div>

<noscript>
  	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="workbench" width="100%" height="100%"
			codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
			<param name="movie" value="<%=contextPath%>/workbench.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#869ca7" />
			<param name="allowScriptAccess" value="sameDomain" />
			<embed src="<%=contextPath%>/workbench.swf" quality="high" bgcolor="#869ca7"
				width="100%" height="100%" name="workbench" align="middle"
				play="true"
				loop="false"
				quality="high"
				allowScriptAccess="sameDomain"
				type="application/x-shockwave-flash"
				pluginspage="http://www.adobe.com/go/getflashplayer">
			</embed>
	</object>
</noscript>


</body>
</html>