You are here: irt.org | FAQ | JavaScript | Window | Q475 [ previous next ]
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='<html><head><title>sample</title></head><body leftMargin="0" topMargin="0" border="0"><div style="position: absolute; top: 0; left: 0"><img src=' + img + '></div></body></html>';
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