Img Tag Attributes Not Being Set (Namely .width and .height)

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Ok, I am still having problems with this...  I am dynamically creating
a window based on the size of an image.  I load the img.src but that
does not set the img's width and height attributes.  I figured it was
because the page is created dynamically so it creates the page before
the image is loaded.  Because the image width etc's aren't set, it
creates the window height and width as 0 + myOffset.  I tried to do a
window.resize with JS but that didn't work either.  (Create the page,
then onload call a func to resize the window).  Any other ideas?
Remember, the image and the window are both dynamic and the images are
of varying sizes, so I cannot pre-set the width and height.  I tried
that too....  Urrrrg...  Please help...



Re: Img Tag Attributes Not Being Set (Namely .width and .height)

Nonee wrote:

Quoted text here. Click to load it

Create an associative table with the names/sizes of the available
images.   Do a look-up just before creating the window.   (I don't
suppose I can convince you that pop up windows are just a bad idea?)

Always:  Please post the page for us to look at.
I'm having to just guess you're talking about javascript.
mbstevens /

Re: Img Tag Attributes Not Being Set (Namely .width and .height)

mbstevens wrote:
Quoted text here. Click to load it

Or, if you're saying that the image is actually being created on the
fly, then you (probably) have server side privileges, and  you should be
able to determine the width and height in software before you create the

Re: Img Tag Attributes Not Being Set (Namely .width and .height)

Bascially, the page I am creating has a list of products.  The new
popup window is a larger size of the image. There is approx 100
different images so I could do a lookup table but there has to be a
better way.  Is there any way to force the browser to load the image
and set the img attributes?

On Thu, 27 Oct 2005 01:05:19 GMT, mbstevens

Quoted text here. Click to load it

Re: Img Tag Attributes Not Being Set (Namely .width and .height)

Nonee wrote:
Quoted text here. Click to load it

Show us the code!  Show us the code!

You can more than likely use server-side code to determine the size of
the image just before you write out the link that the user has to click
to open the window.  You can then use those dimensions to populate the function.

Still, without the code, people might continue to guess the solution to
your problem, but they'll eventually give up because they'll realise
that you're not really listening.


Re: Img Tag Attributes Not Being Set (Namely .width and .height) (HERE'S THE CODE... : ) )

Ok, here is the code.  I also included a func that tries to fix the
window after the window is fully loaded.  The func is called but it
still doesn't work.  Btw, the a = and x = is to get the image name
from the thumbnail name... aka tnImage to Image.

PLEASE HELP.....  heh.


var anImage = new Image();

function BlowUp(filename)
//    var filename;
    var a,x;
    var winHeight, winWidth;

    a = filename.indexOf('thumbs');
    x = filename.substring(0,a) +
//    ../images/urns/thumbs/tnblack engraved.jpg
    anImage.src = x;
    // Get Name of Item
    a = filename.indexOf('tn');
    x = filename.indexOf('.jpg');
    name = filename.substring(a+2,x);
    winHeight = anImage.height+150;
    winWidth = anImage.width+100;
    // To center the image (and page) on the screen
    var winl = (screen.width - winWidth) / 2;
    var wint = (screen.height - winHeight) / 2;
    var winproperty =
    var win ="", "win", winproperty); // a window
    var generator = win.document;
    var root = "";"text/html", "replace");
    generator.write('<link href="'+root+'/css/style.css"
rel="stylesheet" type="text/css">');
    generator.write('<link href="'+root+'/css/format.css"
rel="stylesheet" type="text/css">');
    generator.write('    function FixWindow()');
    generator.write('    {');
    generator.write('        var winHeight =
    generator.write('        var winWidth =
    generator.write('        var winl = (screen.width -
winWidth) / 2;');
    generator.write('        var wint = (screen.height -
winHeight) / 2;');
    generator.write('        window.moveTo (winl,wint);');
    generator.write('        window.resizeTo
(winWidth,winHeight); ');
    generator.write('    }');
    generator.write('<body onLoad="focus(); FixWindow();"
leftmargin="0" topmargin="0">');
    generator.write('<table width="100%" border="0">');
    generator.write('  <tr>');
    generator.write('    <td><p>&nbsp;</p><div
align="center"><span class="Header"><strong>'+name+'</strong><br><img
src=" ' + anImage.src + '" alt="Close this window to return"
    generator.write('  </tr>');
    generator.write('  <tr>');
    generator.write('    <td><div align="center"><font
color="#000000">Close This Window To
    generator.write('  </tr>');



On 27 Oct 2005 00:44:02 -0700, wrote:

Quoted text here. Click to load it

Re: Img Tag Attributes Not Being Set (Namely .width and .height) (HERE'S THE CODE... : ) )

Nonee wrote:
Quoted text here. Click to load it

   .................PAGE OF CODE......................
Quoted text here. Click to load it

That whole page of "generator...." code seems excessive for a pop up
enlargement of an image.  Here's an example of a more reasonable
thumbnail click-through code:

<a href="images/11.jpg"
height=406'); return false;">
<img src="images/1.jpg" width="50" height="41" alt="flower" />
<br />(Image opens in a new window.)<br /></a>

I'm trying to ignore the fact that pop ups are generally a bad idea
because they are inaccessible.  Anyway, from the above code, you see
that you need just the images height and width to make the window pop up
the right size.

If you really _must_ have all that code from the "generator..." section,
consider a normal link to an (X)HTML page, or generate a page from a
server side program. /
may help.

Now, how do you get that width and height?  Just as an example, you can
use the Perl module Image::Size available at
In a Perl script you would use:

use Image::Size;
my ($im_w, $im_h, $im_type) = imgsize('example.jpg");

...and you have them.

Re: Img Tag Attributes Not Being Set (Namely .width and .height) (HERE'S THE CODE... : ) )

Just showing the picture is plain though.  As you can see from the
code, it also has a title and a caption (close to go back or
whatever).  I can do it via php though.  I never thought to go that
direction.  Hmmm.... I will have to work on that.  I do hate js and
try not to use it when I can.

Question:  What do you mean popups are inaccessible?  You mean for
accessibility features or do you mean popup blockers?  

On Fri, 28 Oct 2005 10:49:22 GMT, mbstevens

Quoted text here. Click to load it

Site Timeline