如何用javascript实现窗口，在线求助

<html><head><title>层与按钮对齐</title></head><body>
<div align=left><table border=1>
<tr><td align=center height=50 width=200>
    <input type=button value=ok onmouseover="cc(this)" onmouseout="document.all.pop.style.display='none'"></td>
    <td align=center height=50 width=200>
    <input type=button value=ok onmouseover="cc(this)" onmouseout="document.all.pop.style.display='none'"></td>
    <td align=center height=50 width=200>
    <input type=button value=ok onmouseover="cc(this)" onmouseout="document.all.pop.style.display='none'"></td></tr>
</table><div><div id=pop style="position:absolute;width:100;height:50;z-index:99;display:none">
<table border=0><tr><td align=center>
<img border=0 src=http://www.csdn.net/images/homeimage/csdn.gif></td></tr></table></div><script language=javascript>
function cc(tt)
{
  var daps  = document.all.pop.style;
  var ttop  = tt.offsetTop;     //TT控件的定位点高
  var thei  = tt.clientHeight;  //TT控件本身的高
  var tleft = tt.offsetLeft;    //TT控件的定位点宽
  var ttyp  = tt.type;          //TT控件的类型
  while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
  daps.top  = (ttyp=="image")? ttop+thei : ttop+thei+6; //层的 Y 坐标
  daps.left = tleft + 1;  //层的 X 坐标
  daps.display = "";  //层显示
}
</script>
</body></html>

解决方案 »

  1.   

    <div id=m style="position:absolute;top:0;left:0;visibility:hidden"><img src='http://expert.csdn.net/images/csdn.gif'></div>
    <div onmousemove="m.style.top=event.clientY;m.style.left=event.clientX" onmouseover='m.style.visibility="visible"' onmouseout='m.style.visibility="hidden"'>ggggggggggggggg</div>
      

  2.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title><!-- 以下代码放到head间 ***注意pic/blank.jpg,close_down.jpg,close_over.jpg是必须的 -->
    <style>
    .div_style_hidden{
    width:200px; 
    height:270px; 
    z-index:111;
    BORDER-TOP: #6600FF 2px solid;
    BORDER-BOTTOM: #6600FF 2px solid;
    BORDER-LEFT: #6600FF 2px solid;
    BORDER-RIGHT: #6600FF 2px solid;
    }
    </style>
    <SCRIPT>
    var aaa_gg = "规格:<br>高:500X500<br>宽:300X200<br>"; //格式:图片 id 加上 _gg ***注意这些变量必须定义(可以为空,为空时用默认值)
    var bbb_gg = "规格:<br>高:523X454<br>宽:243X789<br>";
    function mousedown(obj) //图象的鼠标按下事件
    {
    var x;
    var y;
    x = window.event.x;
    y = window.event.y;
    document.all.div_style.style.visibility = 'visible';
    document.all.div_style.style.left = x; 
    document.all.div_style.style.top = y;
    document.all.div_pic.src = obj;
    //if (eval(obj.id + "_gg")) {
    document.all.td_jianjie.innerHTML = obj;
    // }
    flash();
    }
    function mouseout(obj) //图象的鼠标移出事件
    {
    document.all.div_style.style.visibility = 'hidden';
    }
    function close_mousedown(obj) //叉号的鼠标按下事件
    {
    obj.src = 'pic/close_down.jpg';
    }
    function close_mouseup(obj) //叉号的鼠标抬起事件
    {
    document.all.div_style.style.visibility = 'hidden';
    obj.src = 'pic/close_over.jpg';
    }var light    = 0; //亮度
    var time_out = null;
    function flash() //渐变效果
    {
    light += 10;
    if (light == 100) {
    clearTimeout(time_out);
    light = 0;
    return;
    }
    document.all.div_pic.filters.alpha.opacity = 0 + light; //改变图片样式
    time_out = setTimeout("flash()",100); //在此修改渐变时间
    }
    </SCRIPT>
    <div id="div_style" class='div_style_hidden' style='position:absolute;visibility:hidden;left: 1in;top: 1in;background: url("pic/blank.jpg"); background-repeat: repeat;'> 
    <table width="100%" height="106%" border="3" cellspacing="0" cellpadding="0">
    <tr>
    <td width="60%"  align='center'><img src='' id='div_pic' style="filter:alpha(opacity=0)"></td><!-- 左 -->
    <td width="40%" > <!-- 右 -->
    <table width="100%" height="100%" border="0"> 
    <tr width="100%" height="5%">
    <td width="71%">&nbsp;</td>
    <td width="29%"><img src='pic/close_over.jpg' name='close' onmousedown='close_mousedown(this)' onmouseup='close_mouseup(this)' style='cursor:hand'></td> <!-- ×号按钮 -->
    </tr>
    <tr>
    <td id='td_jianjie'>产品简介<br></td> <!-- 产品简介(默认值) -->
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </div>
    <!-- 以上代码放到head间 --></head><body>
    <!-- 以下实例代码参照写就行 -->
    <p onclick="mousedown('d:/yu/备份/不错的隐现效果/pic/aaa.jpg')">科研信息</p>
    </body>
    </html>
      

  3.   

    //修正一下<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title><!-- 以下代码放到head间 ***注意pic/blank.jpg,close_down.jpg,close_over.jpg是必须的 -->
    <style>
    .div_style_hidden{
    width:200px; 
    height:270px; 
    z-index:111;
    BORDER-TOP: #6600FF 2px solid;
    BORDER-BOTTOM: #6600FF 2px solid;
    BORDER-LEFT: #6600FF 2px solid;
    BORDER-RIGHT: #6600FF 2px solid;
    }
    </style>
    <SCRIPT>
    var aaa_gg = "规格:<br>高:500X500<br>宽:300X200<br>"; //格式:图片 id 加上 _gg ***注意这些变量必须定义(可以为空,为空时用默认值)
    var bbb_gg = "规格:<br>高:523X454<br>宽:243X789<br>";
    function mousedown(obj) //图象的鼠标按下事件
    {
    var x;
    var y;
    x = window.event.x;
    y = window.event.y;
    document.all.div_style.style.visibility = 'visible';
    document.all.div_style.style.left = x; 
    document.all.div_style.style.top = y;
    document.all.div_pic.src = obj;
    //if (eval(obj.id + "_gg")) {
    document.all.td_jianjie.innerHTML = obj;
    // }
    flash();
    }
    function mouseout(obj) //图象的鼠标移出事件
    {
    document.all.div_style.style.visibility = 'hidden';
    }
    function close_mousedown(obj) //叉号的鼠标按下事件
    {
    obj.src = 'pic/close_down.jpg';
    }
    function close_mouseup(obj) //叉号的鼠标抬起事件
    {
    document.all.div_style.style.visibility = 'hidden';
    obj.src = 'pic/close_over.jpg';
    }var light    = 0; //亮度
    var time_out = null;
    function flash() //渐变效果
    {
    light += 10;
    if (light == 100) {
    clearTimeout(time_out);
    light = 0;
    return;
    }
    document.all.div_pic.filters.alpha.opacity = 0 + light; //改变图片样式
    time_out = setTimeout("flash()",100); //在此修改渐变时间
    }
    </SCRIPT>
    <div id="div_style" class='div_style_hidden' style='position:absolute;visibility:hidden;left: 1in;top: 1in;background: url("pic/blank.jpg"); background-repeat: repeat;'> 
    <table width="100%" height="106%" border="3" cellspacing="0" cellpadding="0">
    <tr>
    <td width="60%"  align='center'><img src='' id='div_pic' style="filter:alpha(opacity=0)"></td><!-- 左 -->
    <td width="40%" > <!-- 右 -->
    <table width="100%" height="100%" border="0"> 
    <tr width="100%" height="5%">
    <td width="71%">&nbsp;</td>
    <td width="29%"><img src='pic/close_over.jpg' name='close' onmousedown='close_mousedown(this)' onmouseup='close_mouseup(this)' style='cursor:hand'></td> <!-- ×号按钮 -->
    </tr>
    <tr>
    <td id='td_jianjie'>产品简介<br></td> <!-- 产品简介(默认值) -->
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </div>
    <!-- 以上代码放到head间 --></head><body>
    <!-- 以下实例代码参照写就行 --><p onmouseover="mousedown('d:/yu/备份/不错的隐现效果/pic/aaa.jpg')">科研信息</p>
    </body>
    </html>
      

  4.   

    <img id=img1 src="http://expert.csdn.net/images/csdn.gif" style="position:absolute;display:none">
    <a onmouseover="showpic()" onmouseout="hidepic()">显示图片</a>
    <script>
    function showpic(){
    var e=event.srcElement
    var l=e.offsetLeft;
    var t=e.offsetTop;
    var w=e.offsetWidth;
    var h=e.offsetHeight;
    while(e=e.offsetParent){
    l+=e.offsetLeft;
    t+=e.offsetTop;
    }
    img1.style.display="";
    img1.style.left=l+w;
    img1.style.top=t+h;
    }
    function hidepic(){
    img1.style.display="none";
    }
    </script>
      

  5.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title><!-- 以下代码放到head间 ***注意pic/blank.jpg,close_down.jpg,close_over.jpg是必须的 -->
    <style>
    .div_style_hidden{
    width:200px; 
    height:270px; 
    z-index:111;
    BORDER-TOP: #6600FF 2px solid;
    BORDER-BOTTOM: #6600FF 2px solid;
    BORDER-LEFT: #6600FF 2px solid;
    BORDER-RIGHT: #6600FF 2px solid;
    }
    </style>
    <SCRIPT>
    var aaa_gg = "规格:<br>高:500X500<br>宽:300X200<br>"; //格式:图片 id 加上 _gg ***注意这些变量必须定义(可以为空,为空时用默认值)
    var bbb_gg = "规格:<br>高:523X454<br>宽:243X789<br>";
    function mousedown(obj) //图象的鼠标按下事件
    {
    var x;
    var y;
    x = window.event.x;
    y = window.event.y;
    document.all.div_style.style.visibility = 'visible';
    document.all.div_style.style.left = x; 
    document.all.div_style.style.top = y;
    document.all.div_pic.src = obj;
    //if (eval(obj.id + "_gg")) {
    document.all.td_jianjie.innerHTML = obj;
    // }
    flash();
    }
    function mouseout(obj) //图象的鼠标移出事件
    {
    document.all.div_style.style.visibility = 'hidden';
    }
    function close_mousedown(obj) //叉号的鼠标按下事件
    {
    obj.src = 'pic/close_down.jpg';
    }
    function close_mouseup(obj) //叉号的鼠标抬起事件
    {
    document.all.div_style.style.visibility = 'hidden';
    obj.src = 'pic/close_over.jpg';
    }var light    = 0; //亮度
    var time_out = null;
    function flash() //渐变效果
    {
    light += 10;
    if (light == 100) {
    clearTimeout(time_out);
    light = 0;
    return;
    }
    document.all.div_pic.filters.alpha.opacity = 0 + light; //改变图片样式
    time_out = setTimeout("flash()",100); //在此修改渐变时间
    }
    </SCRIPT>
    <div id="div_style" class='div_style_hidden' style='position:absolute;visibility:hidden;left: 1in;top: 1in;background: url("pic/blank.jpg"); background-repeat: repeat;'> 
    <table width="100%" height="106%" border="3" cellspacing="0" cellpadding="0">
    <tr>
    <td width="60%"  align='center'><img src='' id='div_pic' style="filter:alpha(opacity=0)"></td><!-- 左 -->
    <td width="40%" > <!-- 右 -->
    <table width="100%" height="100%" border="0"> 
    <tr width="100%" height="5%">
    <td width="71%">&nbsp;</td>
    <td width="29%"><img src='pic/close_over.jpg' name='close' onmousedown='close_mousedown(this)' onmouseup='close_mouseup(this)' style='cursor:hand'></td> <!-- ×号按钮 -->
    </tr>
    <tr>
    <td id='td_jianjie'>产品简介<br></td> <!-- 产品简介(默认值) -->
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </div>
    <!-- 以上代码放到head间 --></head><body>
    <img src="file:///C|/My%20Documents/My%20Pictures/home007.gif" width="437" height="261" usemap="#Map" border="0"> 
    <map name="Map"> 
      <area shape="poly" coords="230,103,180,138,201,178,263,179,278,137"  onmouseover="mousedown('d:/yu/备份/不错的隐现效果/pic/aaa.jpg');"   href="#">
    </map>
    </body>
    </html>
      

  6.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title><!-- 以下代码放到head间 ***注意pic/blank.jpg,close_down.jpg,close_over.jpg是必须的 -->
    <style>
    .div_style_hidden{
    width:200px; 
    height:270px; 
    z-index:111;
    BORDER-TOP: #6600FF 2px solid;
    BORDER-BOTTOM: #6600FF 2px solid;
    BORDER-LEFT: #6600FF 2px solid;
    BORDER-RIGHT: #6600FF 2px solid;
    }
    </style>
    <SCRIPT>
    var aaa_gg = "规格:<br>高:500X500<br>宽:300X200<br>"; //格式:图片 id 加上 _gg ***注意这些变量必须定义(可以为空,为空时用默认值)
    var bbb_gg = "规格:<br>高:523X454<br>宽:243X789<br>";
    function mousedown(obj) //图象的鼠标按下事件
    {
    var x;
    var y;
    x = window.event.x;
    y = window.event.y;
    document.all.div_style.style.visibility = 'visible';
    document.all.div_style.style.left = x; 
    document.all.div_style.style.top = y;
    document.all.div_pic.src = obj;
    //if (eval(obj.id + "_gg")) {
    document.all.td_jianjie.innerHTML = obj;
    // }
    flash();
    }
    function mouseout(obj) //图象的鼠标移出事件
    {
    document.all.div_style.style.visibility = 'hidden';
    }
    function close_mousedown(obj) //叉号的鼠标按下事件
    {
    obj.src = 'pic/close_down.jpg';
    }
    function close_mouseup(obj) //叉号的鼠标抬起事件
    {
    document.all.div_style.style.visibility = 'hidden';
    obj.src = 'pic/close_over.jpg';
    }var light    = 0; //亮度
    var time_out = null;
    function flash() //渐变效果
    {
    light += 10;
    if (light == 100) {
    clearTimeout(time_out);
    light = 0;
    return;
    }
    document.all.div_pic.filters.alpha.opacity = 0 + light; //改变图片样式
    time_out = setTimeout("flash()",100); //在此修改渐变时间
    }
    </SCRIPT>
    <div id="div_style" class='div_style_hidden' style='position:absolute;visibility:hidden;left: 1in;top: 1in;background: url("pic/blank.jpg"); background-repeat: repeat;'> 
    <table width="100%" height="106%" border="3" cellspacing="0" cellpadding="0">
    <tr>
    <td width="60%"  align='center'><img src='' id='div_pic' style="filter:alpha(opacity=0)"></td><!-- 左 -->
    <td width="40%" > <!-- 右 -->
    <table width="100%" height="100%" border="0"> 
    <tr width="100%" height="5%">
    <td width="71%">&nbsp;</td>
    <td width="29%">
    </tr>
    <tr>
    <td id='td_jianjie'>产品简介<br></td> <!-- 产品简介(默认值) -->
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </div>
    <!-- 以上代码放到head间 --></head><body>
    <!-- 以下实例代码参照写就行 -->
    <p onmouseover="mousedown('d:/yu/备份/不错的隐现效果/pic/aaa.jpg')">科研信息</p>
    </body>
    </html>
      

  7.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title><!-- 以下代码放到head间 ***注意pic/blank.jpg,close_down.jpg,close_over.jpg是必须的 -->
    <style>
    .div_style_hidden{
    width:200px; 
    height:270px; 
    z-index:111;
    BORDER-TOP: #6600FF 2px solid;
    BORDER-BOTTOM: #6600FF 2px solid;
    BORDER-LEFT: #6600FF 2px solid;
    BORDER-RIGHT: #6600FF 2px solid;
    }
    </style>
    <SCRIPT>
    var aaa_gg = "规格:<br>高:500X500<br>宽:300X200<br>"; //格式:图片 id 加上 _gg ***注意这些变量必须定义(可以为空,为空时用默认值)
    var bbb_gg = "规格:<br>高:523X454<br>宽:243X789<br>";
    function mousedown(obj) //图象的鼠标按下事件
    {
    var x;
    var y;
    x = window.event.x;
    y = window.event.y;
    document.all.div_style.style.visibility = 'visible';
    document.all.div_style.style.left = x; 
    document.all.div_style.style.top = y;
    document.all.div_pic.src = obj;
    //if (eval(obj.id + "_gg")) {
    document.all.td_jianjie.innerHTML = obj;
    // }
    flash();
    }
    function mouseout(obj) //图象的鼠标移出事件
    {
    document.all.div_style.style.visibility = 'hidden';
    }
    function close_mousedown(obj) //叉号的鼠标按下事件
    {
    obj.src = 'pic/close_down.jpg';
    }
    function close_mouseup(obj) //叉号的鼠标抬起事件
    {
    document.all.div_style.style.visibility = 'hidden';
    obj.src = 'pic/close_over.jpg';
    }var light    = 0; //亮度
    var time_out = null;
    function flash() //渐变效果
    {
    light += 10;
    if (light == 100) {
    clearTimeout(time_out);
    light = 0;
    return;
    }
    document.all.div_pic.filters.alpha.opacity = 0 + light; //改变图片样式
    time_out = setTimeout("flash()",100); //在此修改渐变时间
    }</SCRIPT>
    <div onmouseout='mouseout(this)' id="div_style" class='div_style_hidden' style='position:absolute;visibility:hidden;left: 1in;top: 1in;background: url("pic/blank.jpg"); background-repeat: repeat;'> 
    <table width="100%" height="106%" border="3" cellspacing="0" cellpadding="0">
    <tr>
    <td width="60%"  align='center'><img src='' id='div_pic' style="filter:alpha(opacity=0)"></td><!-- 左 -->
    <td width="40%" > <!-- 右 -->
    <table width="100%" height="100%" border="0"> 
    <tr width="100%" height="5%">
    <td width="71%">&nbsp;</td>
    <td width="29%">
    </tr>
    <tr>
    <td id='td_jianjie'>产品简介<br></td> <!-- 产品简介(默认值) -->
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </div>
    <!-- 以上代码放到head间 --></head><body>
    <!-- 以下实例代码参照写就行 -->
    <p onmouseover="mousedown('d:/yu/备份/不错的隐现效果/pic/aaa.jpg')" onmouseup="">科研信息</p>
    </body>
    </html>