frame中嵌套一iframe 之间的分隔条 也可以拖动 但是地图会发生改变
<div id=id1 onmouseover="javascript:select1.style.display=''" onmouseout="javascript:select1.style.display='none'">移到我上面</div>
<br><br>
<select name="select1" style="display:none">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
document的使用
document.getElementById("id1").style.display="none";
document.all.id1 同 document.getElementById("id1"). document.all是集合 有长度 可循环
var obj="";
for(i=0;i<document.all.leng th;i++)
{obj+=document.all[i].tagName+";";}
alert(ob j);
js控制ifame的样式
<iframe id="id2" name="id2" style="display:none" src="test12_27_1.asp" ></iframe>
document.all.id2.style.display =""; 只能用document.all.控制而不能用getEleById或者form1.
页面上有许多单元格，但是跨度不一样，即colspan不一样，比如有的是3 有的是5甚至更大。现在需要实现的是只要鼠标悬停在某个单元格上（不管是点在这个单元格的什么地方），在鼠标的尖头处都出现一个层，上面可以显示一些详细的信息。
<table width="500" border="1">
<tr>
<td>abc</td>
<td>abc</td>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td colspan="3">three column</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td colspan="3">three column</td>
</tr>
<tr>
<td>abc</td>
<td colspan="2">two column</td>
<td>abc</td>
<td>abc</td>
</tr>
</table>
<div style="position:absolute;border:1px solid #666;background:#DDD;width:200px;height:80px;padding:10px;display:none" id="tip"></div>
<script language="javascript">
<!--
var tds = document.getElementsByTagName("td");
for( var i=0;i<tds.length;i++)
{
var tip = document.getElementById("tip");
tds[i].onmouseover=function(e)
{
e = window.event || e;
x = e.x || e.layerX;
y = e.y || e.layerY;
tip.style.left= x+"px";
tip.style.top = y+"px";
tip.innerHTML = "这是信息";
tip.style.display="";
}
tds[i].onmouseout= function()
{
tip.style.display="none";
}
}
//-->
</script>
要设置百分比高度 需要删掉dw中的<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
将iframe放入div中 当div被触发时使其浮动在地图之上
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
</script>
</head>
<body marginheight="0" leftmargin="0" >
<div id="idalarm" style="z-index:1;position:absolute;left:450px;top:0px;width:150px;height:20px;background-color:#CCFF00;display:block" onMouseOver="javascript:document.all.idalarm2.style.display = '';"> 警告</div>
<div id="idalarm2" style="z-index:2;position:absolute;left:450px;top:20px;width:150px;height:50px;background-color:#CCFF00;display:none">
<table width="100%" ><tr><td align="center"><input type="button" value="关闭" onclick ="javascript:document.all.idalarm2.style.display = 'none';"></td></tr></table>
</div>
<div id="id1" style="z-index:1;position:absolute;background-color:#33FF00;left:0px;top:0px;width:10px;height:600px;display:block" onMouseOver="javascript:document.all.id1.style.width ='100px';document.all.id2.style.display = ''" >
<div id="id2" style="z-index:10;position:absolute;background-color:#33FF00;left:0px;top:0px;width:100px;height:600px;display:none">
<iframe id="iframe1" frameborder="0" style="display:block;" src="test12_27_1.asp" height="575" width="100"></iframe>
<input type="button" value="关闭" onclick ="javascript:document.all.id2.style.display = 'none';document.all.id1.style.width ='10px';">
</div>
</div>
<div id="id4" style="z-index:13;position:absolute;left:0px;top:500px;width:1000px;height:100px;background-color:#CCFF00;display:none">
<table width="100%" ><tr><td align="right"><input type="button" value="关闭" onclick ="javascript:document.all.id4.style.display = 'none';"></td></tr></table>
</div>
<div id="id3" style="z-index:12;position:absolute;left:0px;top:600px;width:1000px;height:10px;background-color:#CCFF00;display:''" onMouseOver="javascript:document.all.id4.style.display = '';" ><div></body>
</html>