请问怎样使鼠标放在线上时,旁边出现说明?

<html>
<head>
<title>
dfjk</title>
</head>
<body>
<div id="div_Tip" style="BORDER-RIGHT: #666699 1px solid; BORDER-TOP: #666699 1px solid; DISPLAY: none; PADDING-LEFT: 10px; Z-INDEX: 500; LEFT: 448px; VERTICAL-ALIGN: baseline; BORDER-LEFT: #666699 1px solid; WIDTH: 150px; COLOR: #000000; PADDING-TOP: 10px; BORDER-BOTTOM: #666699 1px solid; POSITION: absolute; TOP: 240px; HEIGHT: 50px; BACKGROUND-COLOR: #efeff9; TEXT-ALIGN: left" width="100px" name="div_Tip">aaaaaaaaaaaaaaaaaaa<br/></div><div onmouseout="HideTip(event)" onmouseover="ShowTip(event)">ccccccccccccc</div>
<script>function ShowTip(a)
{
var event=a?a:window.event;
var mX = event.x ? event.x : event.pageX;
var my = event.y ? event.y : event.pageY;
document.getElementById("div_Tip").style.display = 'block';
document.getElementById("div_Tip").style.left=mX +10 ;
document.getElementById("div_Tip").style.posTop=my + 10;
}
function HideTip(a)
{
document.getElementById("div_Tip").style.display = 'none';}
</script>
</body>
</html>

解决方案 »

  1.   

    <div id="tipsDiv" style="position:absoulte;background:#fff;border:1px solid #000"></div>
    脚本:
    var tipdiv = document.getElementById("tipsDiv");
    o.onmouseover = function(){
    tipdiv.style.display = "";
    tipdiv.style.left = window.event.x;
    tipdiv.style.top = window.event.y;
    tipdiv.innerText = "" + window.event.x + "," + window.event.y;
    };
    o.onmouseout = function(){
    tipdiv.style.display = "none";
    };
      

  2.   

    gzdiablo() ,我写成如下,但却说网页有错误,请问怎么改? 谢谢!<html xmlns:v="http://www.eglic.com/">
    <head>
    <title>页面画线</title>
    <meta name="ContentType" content="text/html" />
    <meta name="CharSet" content="GB2312" /><table>
    <tr>
    <td>X1</td><td><input id="in_x1" type="input" value="10" size="5"/></td>
    <td>Y1</td><td><input id="in_y1" type="input" value="10" size="5"/></td>

    </tr>
    <tr><td colspan="4"><input  type="button" value="drawline" onclick="javascript:drawCanvas()"/></td></tr>
    </table><script language="javascript">var Working=false;
    var points = [];
    var lastPoint = {x:0,y:0};
    var tipdiv = document.getElementById("tipdiv");
    function drawCanvas()
    {
    var x1 = parseInt(document.getElementById('in_x1').value);
    var y1 = parseInt(document.getElementById('in_y1').value);
    if(!Working){
    document.getElementById("show").style.display="none";
    Working=true;
    lastPoint.x = x1;
    lastPoint.y = y1;
    points.push( {x:x1,y:y1} );}else{
    var s='<v:line from="'+lastPoint.x+','+lastPoint.y+'" to="'+x1+','+y1+'" style="position:absolute;left:0px;top:0px;"></v:line>';
    lastPoint.x = x1;
    lastPoint.y = y1;
    points.push( {x:x1,y:y1} );var o=document.createElement(s);
    document.body.insertAdjacentElement('BeforeEnd',o);o.onmouseover = function(){
    tipdiv.style.display = "";
    tipdiv.style.left = window.event.x;
    tipdiv.style.top = window.event.y;
    tipdiv.innerText = "" + window.event.x + "," + window.event.y;
    };
    o.onmouseout = function(){
    tipdiv.style.display = "none";
    };}
    }
    </script>
    <style type="text/css">
    v\:* {behavior:url(#default#VML);}
    </style>
    </head>
    <body>
    <div id="show" style="border:5px solid #000;width:200px;height:30px;line-height:30px;text-align:center;display:none"><div id="tipdiv" style="position:absoulte;background:#fff;border:1px solid #000"></div>
    </div>
    </body>
    </html>
     
      

  3.   

    <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
    <title>页面画线</title>
    <meta name="ContentType" content="text/html" />
    <meta name="CharSet" content="GB2312" /><style type="text/css">
    v\:* {behavior:url(#default#VML);}
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td>X1</td><td><input id="in_x1" type="input" value="10" size="5"/></td>
    <td>Y1</td><td><input id="in_y1" type="input" value="10" size="5"/></td></tr>
    <tr><td colspan="4"><input  type="button" value="drawline" onclick="javascript:drawCanvas()"/></td></tr>
    </table><div id="show" style="border:1px solid #000;width:800px;height:500px;line-height:30px;text-align:center;">
    </div>
    <div id="tipdiv" style="position:absolute;background:#fff;border:1px solid #000; padding:3px; display:none;"></div>
    </body>
    </html><script language="javascript">
    var Working=false;
    var points = [];
    var lastPoint = {x:0,y:0};
    var tipdiv = document.getElementById("tipdiv");
    function drawCanvas()
    {
    var x1 = parseInt(document.getElementById("in_x1").value);
    var y1 = parseInt(document.getElementById("in_y1").value);
    if(!Working){
    document.getElementById("show").style.display="";
    Working=true;
    lastPoint.x = x1;
    lastPoint.y = y1;
    points.push({x:x1,y:y1});
    }else{
    var s="<v:line from=\""+lastPoint.x+","+lastPoint.y+"\" to=\""+x1+","+y1+"\" style=\"position:absolute;left:0px;top:0px;\"></v:line>";
    lastPoint.x = x1;
    lastPoint.y = y1;
    points.push( {x:x1,y:y1} );

    var o=document.createElement(s);
    document.body.appendChild(o);
    o.onmouseover = function(){
    tipdiv.style.display = "";
    tipdiv.style.left = window.event.x + 10;
    tipdiv.style.top = window.event.y;
    tipdiv.innerText = "" + window.event.x + "," + window.event.y;
    };
    o.onmouseout = function(){
    tipdiv.style.display = "none";
    };}
    }
    </script>