仿html标签alt效果, 但alt显示内容总是慢了一点,某些按钮或是内容需要提示得比较即时,则可以这样实现,Demo代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Tip</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
.toolTip{filter:progid:DXImageTransform.Microsoft.Shadow(enabled=true,color=#999999,direction=135,strength=3);display:none;padding:0 2px;line-height:17px;background:#fff;*background:#ffffe1;border:1px solid #000;position:absolute;z-index:10000;}
</style>
<BODY>
<div id="toolTip" class="toolTip" style="width:120px;"></div>
<script language="javascript" type="text/javascript">
var toolTip=document.getElementById("toolTip");
window.document.onmousemove=function(evt){
evt = evt || window.event;
var pageoffsetx = document.all? document.documentElement.scrollLeft : window.pageXOffset;
var pageoffsety = document.all? document.documentElement.scrollTop : window.pageYOffset;
toolTip.style.left= evt.clientX - 5 + "px";
toolTip.style.top= evt.clientY + pageoffsety + 20 +"px";
}
function tip(type,strShow,width){
if(type == "visible"){
toolTip.style.width = width + "px";
toolTip.style.display = "block";
toolTip.innerHTML = strShow;
}else if(type == "hidden"){
toolTip.style.display = "none";
}
}
function showHide(hideID,showID){
if(showID != null){
if(document.getElementById(showID).style.display == "none"){
document.getElementById(showID).style.display = "block";
}else{
document.getElementById(showID).style.display = "none";
}
}
if(hideID != null){
document.getElementById(hideID).style.display = "none";
}
}
</script>
<span onmouseover="tip('visible','山寨-IT民工 Eric\'s Blog 蓝色的海洋、自由的天空',500)" onmouseout="tip('hidden')"><INPUT TYPE="button" VALUE="www.whitehouse.net.cn"></span>
</BODY>
</HTML>
效果如下:
