FAQTs - Knowledge Base - View Entry - How do I open a window exactly the size of the image it is going to display?

faqts : Computers : Programming : Languages : JavaScript : Images

+ Search

Entry

How do I open a window exactly the size of the image it is going to display?

Under IE6: a script error produced by line 6 in the first instance, debug indicates ";" error.

Feb 23rd, 2001 07:17
Martin Honnen, Colin Koh,

First note one restriction: browser windows have minimum dimensions of 
100x100 so the code below will not work if you try it with an image 
smaller than that, the window will be 100x100 and not the size of the 
image. 
The code below works with NN4 (where the window's content area has 
exactly the size of the image) and IE4+ (where it nearly has though a 
correction is needed). Unfortunately NN6 is buggy that the code doesn't 
work and Opera doesn't fire the onload handler for Image objects which 
prevents you from sizing the window while opening it.
<HTML>
<HEAD>
<SCRIPT>
var windowFeatures = 
'resizable=1,scrollbars=1,menubar=1,location=1,toolbar=1,statusbar=1';
function showImage (imgURL) { 
  if (window.opera || !window.Image) { // Opera doesn't fire 
Image.onload handler
    open(imgURL, '_blank', windowFeatures);
  }
  else { 
    var img = new Image();
    img.onload = openImageWindow;
    img.src = imgURL;
  }
}
function openImageWindow (evt) {
  if (window.innerWidth) {
    var w = this.width;
    var h = this.height;
    var win = open('about:blank', '_blank', 
         'innerWidth=' + w + ',innerHeight=' + h + ',' + 
windowFeatures);
    var html = '';
    html += '<HTML><HEAD>';
    html += '<STYLE>';
    html += 
'#imgContainer { position: absolute; left: 0px; top: 0px; }';
    html += '<\/STYLE>';
    html += '<\/HEAD>';
    html += '<BODY>';
    html += '<SPAN ID="imgContainer">';
    html += '<IMG SRC="' + this.src + '">';
    html += '<\/SPAN>';
    html += '<\/BODY><\/HTML>';
    win.document.open();
    win.document.write(html);
    win.document.close();
  }
  else if (document.all) {
    var w = this.width;
    var h = this.height;
    var win = open('about:blank', '_blank', 
         'width=' + w + 'height=' + h + ',' + windowFeatures);
    var html = '';
    html += '<HTML><HEAD>';
    html += '<STYLE>';
    html += 
'#imgContainer { position: absolute; left: 0px; top: 0px; }';
    html += '<\/STYLE>';
    html += '<\/HEAD>';
    html += '<BODY>';
    html += '<SPAN ID="imgContainer">';
    html += '<IMG SRC="' + this.src + '">';
    html += '<\/SPAN>';
    html += '<\/BODY><\/HTML>';
    win.document.open();
    win.document.write(html);
    win.document.close();
    win.resizeBy (w - win.document.body.clientWidth,
                  h - win.document.body.clientHeight);
    win.document.body.scroll = 'no';
  }
}
</SCRIPT>
</HEAD>
<BODY>
<A 
HREF="http://cagle.slate.msn.com/news/clintonmedia/images/thompson.jpg"
   TARGET="_blank",
   ONCLICK="showImage(this.href);
            return false;"
>
clinton 
</A>
|
<A HREF="http://cagle.slate.msn.com/news/statereligion/images/nick.gif"
   TARGET="_blank",
   ONCLICK="showImage(this.href);
            return false;"
>
missile 
</A>
</BODY>
</HTML>