Monday, July 03, 2006

Instant popup on mouseover


<STYLE TYPE="text/css">
<!--
#dek {POSITION:absolute;VISIBILITY:hidden;Z-INDEX:200;}
//-->
</STYLE>
<DIV ID="dek"></DIV>

<SCRIPT TYPE="text/javascript">
<!--

Xoffset=0; // modify these values to ...
Yoffset= 20; // change the popup position.

var old,skn,iex=(document.all),yyy=-1000;

var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all

if (ns4)
skn=document.dek
else if (ns6)
skn=document.getElementById("dek").style
else if (ie4)
skn=document.all.dek.style
if(ns4)document.captureEvents(Event.MOUSEMOVE);
else{
skn.visibility="visible"
skn.display="none"
}
document.onmousemove=get_mouse;

function popup(msg,bak){
var content="<table><tr><td";

content += " bgcolor='"+bak+"'";

content += ">"+msg+"</td></tr></table>";

yyy=Yoffset;
if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}
if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''}
if(ie4){document.all("dek").innerHTML=content;skn.display=''}
}

function get_mouse(e){
if(ns4||ns6){
skn.left=e.pageX+Xoffset+'px';
skn.top=e.pageY+yyy + 'px';
}else{
if (document.documentElement){
// IE6 +4.01
skn.left=event.x+document.documentElement.scrollLeft+Xoffset+'px';
skn.top=event.y+document.documentElement.scrollTop+yyy + 'px';
}else if (document.body){
// IE5 or DTD 3.2
skn.left=event.x+document.body.scrollLeft+Xoffset+'px';
skn.top=event.y+document.body.scrollTop+yyy + 'px';
}
}
}

function kill(){
yyy=-1000;
if(ns4){skn.visibility="hidden";}
else if (ns6||ie4)
skn.display="none"
}

//-->
</SCRIPT>


Usage:


<a href="mylinkhere.php" ONMOUSEOVER="popup('Popup text','yellow')"; ONMOUSEOUT="kill()">click here</a>

No comments: