Q475 Is it possible to pop-up a window the same size as the image it contains?

irt.org | Knowledge Base | JavaScript | Window | Q475 [ previous next ]

Q475 Is it possible to pop-up a window the same size as the image it contains?

Not easily. First you have to know the size of the image. Then you have to be able to pass the name of the image to the popup window. With Netscape Navigator you can pass a search string, with Internet Explorer this works online but not offline. Then you have to attempt to reduce the margins to zero. Not easily done in Netscape, except Netscape Navigator 4 which allows you to set the margins in the BODY tag, although you could get around this by loading a frameset in the new window with a hidden frame - this makes it easier to control the margins. Also the more up-to-date browsers will not allow you to open very small windows, e.g. sub 100x100 (its a potential security hole if they do). If that hasn't put you off...

First lets open a window:

<script language="JavaScript"><!--
var x = 100, y = 200; // width and height of image
var imageName = 'apicture.gif';
var fileName  = 'apage.htm';

var NN = 'aframe.htm' + '?' + escape(imageName);
var MSIE = 'apage.htm';

if (navigator.appName == 'Netscape')
    myWindow = window.open(NN,'windowName','width='+x+',height='+y);
else
    myWindow = window.open(MSIE,'windowName','width='+x+',height='+y);
//--></script>

Then in aframe.htm:

<html>
<script language="JavaScript"><!--
document.write('<frameset rows="100%,*">');
document.write('<frame src="' + unescape(location.search.substring(1)) + '" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" noresize>');
document.write('<frame src="blank.htm" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" noresize>');
document.write('<\/frameset>');
//--></script>
</html>

And in blank:

<html><body></body></html>

And in apage.html:

<html>
<body topmargin="0" leftmargin="0">
<script language="JavaScript"><!--
document.write('<img src="' + opener.imageName + '">');
//--></script>
</body>
</html>

Selva Kumar writes:

Here is a better solution:

function opennew(img,x,y) {
  // path, width and height as arguments
  var msgWindow = window.open('','','Width=' + x + ',Height=' + y + 'resizable=no');
  var page='sample';
  msgWindow.document.open();
  msgWindow.document.write(page);
  msgWindow.document.close();
}

The following was submitted by Dan Souza

Here is an easy way to do it. It's a shortcut. Make an HTML page out of your image. The page should contain nothing but the image. Then use CSS to put your image flush left and flush top. Then open your pop up window to contain the HTML page the size of the image. For example, you have image.jpg which is 100 x 200. Use the following

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css"><!--
IMG {
Position: absolute;
Left: 0px;
Top: 0px;
}
//--></style>

<title>Image</title>
</head>

<body>

<img src="image.jpg" height="200" width="100" border="0" alt="0">

</body>
</html>

Now in the page that you want to put the popup into insert the following:

<a href="image.html" onClick="window.open('image.html','image','height=200,width=100,left=XXX,top=XXX,screenx=XXX,screeny=XXX'); return false">Open Window</a>

Substitute XXX in left, top, screenx, and screeny for the screen position where you'd like the popup to appear. (Netscape doesn't recognize left and top, you have to use screenx for left, and screeny for top)

The popup will now contain the image exactly with no space and no border

Feedback on 'Q475 Is it possible to pop-up a window the same size as the image it contains?'

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 30th March 2008. Maintained by: Martin Webb and Michel Plungjan
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.