div不能放在applet上的解决方案（iframe）-CSDN博客

今天尝试着把worldwind放在底层，然后上面浮动div，结果发现applet的层级实在是太高了，网上的解决方案是用flash或者object。

给大家看个iframe的解决办法，是国外的一个程序员做的http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/

效果是将sub div放在了一个applet时钟上，实际上是sub iframe。

HTML:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<script type="text/javascript">
function mouseIn() {
// create an iframe at the exact same position and
// size as the sub div
// Google "iframe shime" for more information
var shimmer = document.createElement('iframe');
shimmer.id='shimmer';
shimmer.style.position='absolute';
// normally you would get the dimensions and
// positions of the sub div dynamically. For demo
// purposes this is hardcoded
shimmer.style.width='150px';
shimmer.style.height='80px';
shimmer.style.top='100px';
shimmer.style.left='80px';
shimmer.style.zIndex='999';
shimmer.setAttribute('frameborder','0');
shimmer.setAttribute('src','javascript:false;');
document.body.appendChild(shimmer);
// make sub div visible
var sd = document.getElementById('subdiv');
sd.style.visibility='visible';
}
function mouseOut() {
var sd = document.getElementById('subdiv');
sd.style.visibility='hidden';
var shimmer = document.getElementById('shimmer');
document.body.removeChild(shimmer);
}
</script>
<style type="text/css">
#maindiv {display:block; width:150px; height:80px;
background:red;}
#subdiv {display:block; width:150px; height:80px;
background:blue; position:absolute;
top:100px; left:80px;
z-index:1000; visibility:hidden;}
</style>

<div id="maindiv" onmouseover="mouseIn();"
onmouseout="mouseOut();">
<p>MAIN DIV </p>
<p>move mouse here </p>
</div>

<div id="subdiv">
<p>SUB DIV </p>
</div>

<applet style"border:1px solid blue;"
codebase="http://java.sun.com/applets/jdk/1.4/demo/applets/Clock/"
code="Clock.class" width="170" height="150">
</applet>
</body>
</html>

后来又有个家伙做了一个导航菜单，个人觉得还是很值得看下的。