Cannot close when mouseover goes away

[mharrison]

I found the following code to create a preview popup that loads what I tell it to in my link code. However, I am wanting to know if I can make the iframe popup close when the mouse moves off of the link that triggered it.

var iframePreviewer = function() {
var mousePos = {x:0, y:0}, obj = null, previewTim = null;
var wrapper = null;
var iframe = null;
return {
init : function() {
wrapper = document.createElement('div');
wrapper.setAttribute('id', 'wrapper');
wrapper.style.width = '600px';//For IE6 these need to be set here rather than in CSS.
wrapper.style.height = '400px';//For IE6 these need to be set here rather than in CSS.
var a = document.createElement('a');
a.href = '';
a.onfocus = function(){ this.blur(); };
a.onclick = this.close;
var txt = document.createTextNode('Close');
a.appendChild(txt);
iframe = document.createElement('iframe');
wrapper.appendChild(iframe);
wrapper.appendChild(a);
document.body.appendChild(wrapper);
this.close();
},
calcPopupCoords : function(coords) {
//Apply offsets from mouse position to keep popup on screen
var half = { x:Math.floor(document.body.clientWidth/2), y:Math.floor(document.body.clientHeight/2) };
coords.x -= ((coords.x > half.x) ? 10+parseInt(wrapper.style.width) : -10);
coords.y -= ((coords.y > half.y) ? 10+parseInt(wrapper.style.height) : -10);
return coords;
},
preview : function(obj) {
clearTimeout(previewTim);
if (!iframe || !obj || !obj.href) { return false; }
if (iframe.src != obj.href) { iframe.src = obj.href; }
obj.onmousemove = this.getMouseXY;
previewTim = setTimeout("iframePreviewer.move_n_show()", 50);//delay gives getMouseXY time to bite.
},
move_n_show : function() {
var coords = this.calcPopupCoords(mousePos);
wrapper.style.left = coords.x + 'px';
wrapper.style.top = coords.y + 'px';
wrapper.style.display = 'block';
iframe.style.display = 'block';
},
close : function(obj) {
iframe.setAttribute('src', 'about:blank');
wrapper.style.display = 'none';
return false;
},
getMouseXY : function(e) {
e = e || event;
mousePos.x = e.pageX || (e.clientX + document.body.scrollLeft);
mousePos.y = e.pageY || (e.clientY + document.body.scrollTop);
return true;
},
stopMouseCapture : function() {
if(obj != null) { obj.onmousemove = null; }
}
}
}();
onload = function(){
iframePreviewer.init();
}
onunload = function(){
iframePreviewer.stopMouseCapture();
iframePreviewer.close();
}

Right now the link code looks like this:

<a style=\"float:left;\" href=\"".$row['lnktxt']."\" target=_blank onMouseover=\"iframePreviewer.preview(this);\" onMouseout=\"iframePreviewer.stopMouseCapture();\">

It is pulling in data from my database and previewing the link before the user clicks on it. As I said, the iframe popup opens and displays just fine, and I can click close at the bottom, but if the close link is overtop of another link, or I mouseover another link before I get to it, it will just move the mouseover event...I would like the window to close if I move off of the link, like going to the left or right where there is blankspace.

[mharrison]

Solved my own problem here....my link was triggering 1 of 2 possible events on the onmouseout trigger....it was telling the iframepreviewer to stop capturing the mouse....I changed it to close and all is well.


iframePreviewer.close()