Q885 How can I open and close a specific sized window in a specific location, by passing the name of an image along with the text caption to be loaded in a single generic document, which can be reused many times, when the mouse moves over an image link?

You are here: irt.org | FAQ | JavaScript | Window | Q885 [ previous next ]

The positioning of the window only works in certain browsers, but try this:

<script language="JavaScript"><!--
var windowHandle = null;
var globalImage = null;
var globalImageWidth = null;
var globalImageHeight = null;
var globalCaption = null;

function myOpen(localImage,localCaption,imageWidth,imageHeight,windowWidth,windowHeight,xPos,yPos) {
    globalImage = localImage;
    globalCaption = localCaption;
    globalImageWidth = imageWidth;
    globalImageHeight = imageHeight;
    windowHandle = window.open('popup.htm','windowName','width=' + windowWidth + ',height=' + windowHeight + ',left=' + xPos + ',top=' + yPos + 'screenX=' + xPos + ',screenY=' + yPos);
    if (!windowHandle.opener)
        windowHandle.opener = self;
}

function myClose() {
    windowHandle.close()
}

function myVoid() { }
//--></script>

<a href="#" onClick="this.href='javascript:myVoid()'" onMouseOver="myOpen('image2.gif','text',520,360,540,420,50,50)" onMouseOut="myClose()"><img src="image1.gif" width="100" height="100" border="0"></a>

With the following in the popup.htm file:

<center>

<script language="JavaScript"><!--
var output = '<img src="' + opener.globalImage + '" width="' + opener.globalImageWidth + '" height="' + opener.globalImageHeight + '" alt="' + opener.globalCaption + '">';

output += '<p>' + opener.globalCaption + '<\/p>';

document.write(output);
//--></script>

</center>

There is however, one small problem with the above example: once the popup window has opened, if the mouse pointer is moved ever so slightly (whilst over the popup window) then the popup window closes immediately. A solution is to add a delay to the closing of the popup window:

<html>

<head>
<script language="JavaScript"><!--
var windowHandle = null;
var globalImage = null;
var globalImageWidth = null;
var globalImageHeight = null;
var globalCaption = null;

function myOpen(localImage,localCaption,imageWidth,imageHeight,windowWidth,windowHeight,xPos,yPos) {
    globalImage = localImage;
    globalCaption = localCaption;
    globalImageWidth = imageWidth;
    globalImageHeight = imageHeight;
    windowHandle = window.open('popup.htm','windowName','width=' + windowWidth + ',height=' + windowHeight + ',left=' + xPos + ',top=' + yPos + 'screenX=' + xPos + ',screenY=' + yPos);
    if (!windowHandle.opener)
        windowHandle.opener = self;
}

var blurred = false;

function myClose() {
    if (!blurred)
        windowHandle.close();
    else
        setTimeout('myClose()',100);
}

function myVoid() { }
//--></script>
<head>

<body onBlur="blurred=true" onFocus="blurred=false">

<a href="#" onClick="this.href='javascript:myVoid()'" onMouseOver="myOpen('image2.gif','text',520,360,540,420,50,50)" onMouseOut="myClose()"><img src="image1.gif" width="100" height="100" border="0"></a>

</body>

</html>