如何使鼠标停留在一个控件上2秒之后显示一个动态信息

Question

<script language="javascript">
var tip,msg,px,py;
function showTip()
{
tip=document.createElement("DIV");
tip.setAttribute("id","myTip");
tip.style.cssText="position:absolute;width:200px;height:50px;left:"+px+"px;top:"+py+"px;border:1px solid #FC3;background:#FFC;padding:3px;z-index:100";
msg="图片名称：1.gif <br> 图片大小：200*200";//这里是你需要的显示的信息
tip.innerHTML=msg;
document.body.appendChild(tip);
}
function hideTip()
{
px=event.x;
py=event.y;
tip=document.getElementById("myTip");
if(tip) document.body.removeChild(tip);
}
</script>
<img src="1.gif" width="200" height="200" onmouseover="setTimeout('showTip()',2000)" onmousemove="hideTip()"/>

Answer 1

谢谢chouchy(城市刀客)，您的代码基本能解决问题，还有点不足之处就是只有当鼠标第一次移进地图时才显示信息，鼠标移动后信息消失，但此时鼠标不移出图片，再在图片内停留2秒信息就不会出现，必须把鼠标移出图片一次才行，能不能不用将鼠标移出图片，只要再次停留时间满2秒就再次显示信息。

Answer 2

to:chouchy(城市刀客) 还有个问题，照您的代码，当鼠标在图片上时不管时移动还是静止，2秒后都会出现提示框；希望达到的效果不是这样，而是如果鼠标一致移动就不显示任何提示，只有当鼠标在图片上停留2秒后才显示提示。  问题好像比较复杂，解决后愿另加100分相送。

Answer 3

onmousemove="hideTip()"改为
onmouseout="hideTip()"

Answer 4

按下面的JS代码再添上showTip函数和适当的HTML应该就能满足你的要求了：var timeoutHandle;
function onMouseOver()
{
timeoutHandle = setTimeout("showTip()", 2000);
}
function onMouseOut()
{
hideTip();
}
function onMouseMove()
{
clearTimeout(timeoutHandle);
timeoutHandle = setTimeout("showTip()", 2000);
}

Answer 5

TO:krfstudio()， 多谢指点，有些小地方稍微改动了一下var timeoutHandle;
function onMouseOver()
{
//timeoutHandle = setTimeout("showTip()", 2000);   如果用这一句会每隔2秒闪烁一下
        showTip();
}
function onMouseOut()
{
hideTip();
}
function onMouseMove()
{
         hideTip();        加这一句是div消失
clearTimeout(timeoutHandle);
timeoutHandle = setTimeout("showTip()", 2000);
}
另外还有一个问题，就是现在鼠标移出图片后，仍然会生成一个消息框，不知道为什么，怎么解决？

Answer 6

在 onMouseOut 中把这句加上就好了clearTimeout(timeoutHandle)。
前面的代码只是大概示意了一下思路，没有仔细去弄，下面的绝对没问题了var timeoutHandle;
function onMouseOver()
{
clearTimeout(timeoutHandle);
timeoutHandle = setTimeout("showTip()", 2000);
}
function onMouseOut()
{
clearTimeout(timeoutHandle);
hideTip();
}
function onMouseMove()
{
clearTimeout(timeoutHandle);
timeoutHandle = setTimeout("showTip()", 2000);
hideTip();
}

Answer 7

修改一下：发现不用onmouseover也可以
<script language="javascript">
var tip,msg,px,py;
function showTip()
{
tip=document.createElement("DIV");
tip.setAttribute("id","myTip");
tip.style.cssText="position:absolute;width:200px;height:50px;left:"+px+"px;top:"+py+"px;border:1px solid #FC3;background:#FFC;padding:3px;z-index:100";
msg="图片名称：1.gif <br/> 图片大小：200*200";//这里是你需要的显示的信息
tip.innerHTML=msg;
document.body.appendChild(tip);
}
function hideTip()
{
tip=document.getElementById("myTip");
if(tip)document.body.removeChild(tip);
}
var timeoutHandle;
function onMouseOver()
{ document.getElementById("status").value+="over%"
px=event.x;
py=event.y;
hideTip();
clearTimeout(timeoutHandle);
timeoutHandle = setTimeout("showTip()", 2000);
}
function onMouseOut()
{
    document.getElementById("status").value+="out%"
clearTimeout(timeoutHandle);
hideTip();
}
function onMouseMove()
{   
px=event.x;
py=event.y;
    document.getElementById("status").value+="move%"
    hideTip();
clearTimeout(timeoutHandle);
timeoutHandle = setTimeout("showTip()", 2000);

}
</script>
<img src="1.gif" width="200" height="200" onmousemove="onMouseMove()"/>
<input type="text" id="status" size="150"></input>

Answer 8

回楼上的，不用 onmouseover 当然也可以用，因为只要鼠标一移进来就回先后得到两个消息，一个 onmouseover 一个 onmousemove，加入 onmouseover 只是使程序的思路更加清晰，比较容易看懂而已。

Answer 9

to:krfstudio()， jun573(军)  照你们所说的做了修改，确实解决了问题，非常感谢，随后送分。另外还有一个小问题：我现在希望在div上显示的是鼠标移动图片上2秒后从服务器端数据库中查询所得的信息。为了实现这个目的我在页面上加了一个webcontrols 的button控件，visible＝flase，id＝btCall，即<asp:Button id="btCall" style="Z-INDEX: 107; LEFT: 496px; POSITION: absolute; TOP: 144px" runat="server" Width="80px" Text="隐藏查询" Visible="False"></asp:Button>   
在.cs中响应点击按钮事件
private void btCall_Click(object sender, System.EventArgs e)
{
   //查询数据库代码
   str="查询结果";    //str 为全局变量
}
为在javascript中调用点击按钮事件，在showTip()中加入语句document.Form1.btCall.click();即
function showTip()
{
document.Form1.btCall.click();
tip=document.createElement("DIV");
tip.setAttribute("id","myTip");
tip.style.cssText="position:absolute;width:200px;height:50px;left:"+px+"px;top:"+py+"px;border:1px solid #FC3;background:#FFC;padding:3px;z-index:1000";
tip.innerHTML=document.all.feedback.value;//传递数据库查询结果字符串str
document.body.appendChild(tip);
}其中用了一个input来传递数据库查询结果：
<input type=hidden name="feedback" value="<%=str%>">现在的效果是在showTip中加入document.Form1.btCall.click()语句后，鼠标在图片上停留2秒后，div会闪烁一下，随即消失，然后每个2秒闪烁一次，这是不是页面刷新造成的，试了好些办法都没有解决。

Answer 10

to：gaochao79(www.informe.cn)
这个不行