Tuesday, August 15, 2006

Firefox compatible Dynamic Tooltip/input javascript

->>>Did you know that firefox is the only browser which follows WC3 standards...doesnt allow any non standard javascript ...or html.

The script below gives a tooltip like box on mouseover in which you can place any custom text or html controls.
function initalt()
{
altback="white" ;
altborder="CEDEE7";
altfont="arial"; // Alt-Message Font
altfontcolor="203C70";// Alt-Message Font color
altfontsize="2"; // Alt-Message Font Size
altoffx=5; // Alt-Message horizontal offset from mouse-position
altoffy=15; // Alt-Message vertical offset from mouse-position
altwidth=240; // Alt-Message width, will be expanded by your message
altheight=0; // Alt-Message height, will be expanded by your message
// end of Variables

document.onmousedown = sniff;
document.onmousemove = sniff;
document.onmouseup = sniff;

document.getElementById("IdOutput").innerHTML += '';


}

function sniff(e)
{
// GETS Mouseposition

var mousex=e.clientX;
var mousey=e.clientY+document.body.scrollTop;
altmessage.style.top=mousey+altoffy;
altmessage.style.left=mousex+altoffx;

}

function doalt(message)
{
initalt();
//The main routine
content=''+message+'';

document.getElementById("test").value = "test";
document.getElementById("altmessage").style.visibility = "visible";
}
function realt()
{

//document.getElementById("test").style.visibility = "hidden";
document.getElementById("altmessage").style.visibility = "hidden";
}
To Use this (div Id = "IdOutput"
a href="http://www.yoursite.html" onmouseover="doalt('your message')" Link
/div>)

No comments: