Hover (on mouse over) popup message example:

To create a pop up when you hover over an object, for example or this text, you will require code to be entered into the following:

  • Header - sets the location of the popup (popper) class in relation to the cursor
  • Body general - sets the popper class function ID (topdesk) and popup (pop) default layout, title etc...
  • Body Entry - defines the message and background colour (pop) values

Header
In the Header section, copy in the following code:

<style TYPE="text/css">
<!--
body{
overflow:scroll;overflow-x:hidden
}
.popper
{
position : absolute;
visibility : hidden;
}
//-->
</style>

Body general
In the begining of the Body section, copy in the following code:

<DIV ID="topdeck" CLASS="popper">&nbsp;</DIV>

<SCRIPT>

/*
Pop up information box II
By Mike McGrath (mike_mcgrath@lineone.net, http://website.lineone.net/~mike_mcgrath)
Permission granted to Dynamicdrive.com to feature script in archive
For full source code and installation instructions to this script, visit http://dynamicdrive.com
*/

var nav = (document.layers);
var iex = (document.all);
var skn = (nav) ? document.topdeck : topdeck.style;
if (nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;

function pop(msg,bak)
{

var content ="<TABLE WIDTH=130 BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=#ffffff><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><CENTER><FONT COLOR=#000000 SIZE=1><B>Link Details</B></FONT></CENTER></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR="+bak+"><TR><TD><FONT FACE=Arial SIZE=1 COLOR=#000000><CENTER><B>"+msg+"</B></CENTER></FONT></TD></TR></TABLE></TD></TR></TABLE>";

if (nav)
{
skn.document.write(content);
skn.document.close();
skn.visibility = "visible";
}
else if (iex)
{
document.all("topdeck").innerHTML = content;
skn.visibility = "visible";
}
}

function get_mouse(e)
{
var x = (nav) ? e.pageX : event.x+document.body.scrollLeft;
var y = (nav) ? e.pageY : event.y+document.body.scrollTop;
skn.left = x - 60;
skn.top = y+20;
}

function kill()
{
skn.visibility = "hidden";
}

</SCRIPT>

var content ="" values as required. This example shows Message (+msg+) and Background colour ("bak") variables.

Body Entry
In the Body, for a popup entry use the following code:

<a href="" target="_blank" ONMOUSEOVER="pop('Enter the required popup text','enter the background colour')"; ONMOUSEOUT="kill()">enter image source or text here</a>

As well as setting the ONMOUSEOVER to the POP function, you may also set the HREF="" to a required link.