Roll over text - Within Browser!

[Dat]

I've created a hover.js and what it does it show a image preview when hovering over a link.

 

The problem is if the link is at the bottom of the page, then the preview is covered up by the brower. How do can make it so the div will offset within the browser?

 

Warning: I'm VERY new to js.

 

Here is my code:

if (document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=mtrack;
var ent; // Our floating div
var posx=0; // Our mouseX
var posy=0; // Our mouseY
var offsetX=16; // Offset X away from mouse
var offsetY=10; // Offset Y
var popUp = false; // Is it showing right now??!

// Run upon load 
function init() {
// Set up div we will use to hover our text
ent = document.createElement("div");
// Change these to customise your popup
ent.style.color = "#000000";
ent.style.padding = "5px";
ent.style.background = "#fff";
ent.style.border = "1px solid #B9B9B9";
// Don't, however, change these
ent.style.left = -100;
ent.style.top = -100;
ent.style.position = 'absolute';
ent.innerHTML = '';
ent.style.zIndex = 10;
document.getElementById("thepage").appendChild(ent);
}

// Keeps mouse x and y in posx and posy
function mtrack(e) {
if (popUp) {
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop;
}
ent.style.left = posx + offsetX;
ent.style.top = posy + offsetY;
}
}

// Change floating div to correct text on mouseover
function doText(t, e) {
popUp = true;
ent.innerHTML = t;
}

// Change back to nothing
function doClear() {
popUp = false;
ent.style.left = -100;
ent.style.top = -100;
ent.innerHTML = "";
}

 

Link:

<a href="/link.php?id=42" onMouseover="doText('<img src=/images/image.gif>', this);" onMouseOut="doClear();">link!</a>

[mikemessiah]

ok, so how would I do it if the link to my rollover image is also one in a database...?

 

<a href="/link.php?id=42" onMouseover="doText('<img src=/images/image.gif>', this);" onMouseOut="doClear();">link!</a>

 

Mine would then be

 

<a href="<?php echo "mini1.php?id=$ID" ?>" onMouseover="doText('<img src=<?php echo "mini1.php?id=$ID" ?>', this);" onMouseOut="doClear();">link!</a>

 

Or am I just being silly?

[Dat]

That doesn't help... ???