HTML中用JavaScript实现tooptip功能
【注】本内容解决了:1.在HTML中怎样为控件添加tip提示(JavaScript实现)
2.怎样实现JavaScript中参数传递
3.怎样解决setTimeout("hanshu()",1000)不能执行带参函数问题
<script language="javascript">
var tip,msg,px,py;
function showTip(strTip)
{
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=strTip;//这里是你需要的显示的信息
tip.innerHTML=msg;
document.body.appendChild(tip);
}
function hideTip()
{
tip=document.getElementById("myTip");
if(tip)document.body.removeChild(tip);
}
var timeoutHandle;
function onMouseOver(strTip)
{
px=event.x;
py=event.y;
hideTip();
clearTimeout(timeoutHandle);
var s=function(){showTip(strTip);};
timeoutHandle = setTimeout(s, 500); //因为setTimeout中函数不能带参数,故将带参函数赋予变量s
}
function onMouseOut()
{
clearTimeout(timeoutHandle);
hideTip();
}
function onMouseMove(strTip)
{
px=event.x;
py=event.y;
hideTip();
clearTimeout(timeoutHandle);
var s=function(){showTip(strTip);};
timeoutHandle = setTimeout(s, 500);
}
</script>
<img src="1.gif" width="200" height="200" onmousemove="onMouseMove('图片名称:1.gif <br> 图片大小:200*200')"/>