用div实现框架(排除frame)

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 = '';">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;警告</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>&nbsp;&nbsp;&nbsp;&nbsp;
<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>

阅读更多
个人分类: the gossip
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭