Popup image loader[?]

sankar · July 22nd, 2003, 02:06 AM

Hi,
I have a small problem. I am providing a link to open image in a popup window,if anyone clicks on the icon-size image. My problem is I want to show a status of image loading till the image is fully loaded in the new window. Once the image is fully loaded, the status bar should disappear from the window and the complete image gets displayed.Can it be done? Thx in advance for any help.

lillu · July 22nd, 2003, 06:43 AM

Hi,

It's quite simple. You have two files.

One with the image icon. I named it open_image.htm

(Make sure you place all newWin properties on one single line or you may get errors from some older browsers about it.)

What the function does:

Sets the status property to this user defined string when the function is invoked (the window opening)
<html>
<head>
<script language="javascript">
function showWindow()
{
status = "Loading image...";

newWin=window.open('show_image.htm','newWin','tool bar=no,location=no,directories=no,status=no,menuba r=no,scrollbars=no,resizable=no,width=156,height=1 67,top=100,left=100')
}
</script>
<head>
<body>
<a href="javascript:showWindow()"><img src="lillu_tn.jpg" border=0 /></a>
</body>
</html>

There you go. Then you have what I name show_image.htm. A very simple page with the image on it, but we show it as a popup here. So until now you have 'Loading image...' in the status bar.

We know from the show_image.htm onload event handler when the page has fully loaded. Then we set the status property in the open_image window to an empty string.

<html>
<head>
</head>
<body onload="javascript:opener.window.status=''">
<img src="lillu.jpg" border=0 alt="lillu" />
</body>
</html>

(opener is the window that opened the popup and the status bar is also there not in the popup)

HTH,

Lillu

The Purple Couch
http://www.geocities.com/lillamarta

lillu · July 22nd, 2003, 06:56 AM

Hi again,

I added a tiny bit of pizzaz to the script:

Now you don't have the ugly path displayed when you hover above the image but rather a nice 'alt' message.
When you move off from the icon, the status bar is set to empty.

<a href="javascript:showWindow()" onMouseOver="window.status='Click on image to enlarge it in new window'; return true" onMouseOut="window.status=''"><img src="lillu_tn.jpg" border=0 /></a>

The Purple Couch
http://www.geocities.com/lillamarta