Image Size Not Being Recognized

[Nonee]

Hello,

Ok, I wrote a function to blow up a thumbnail image by
replacing the thumbnail with an original size image. When you click
the thumbnail, a new window opens up with the size based on the
original image + 150 or 100 (height, width respectively). Well, I can
get the name of the original image perfectly but when it creates the
new window, it doesn't have the correct size of the image to make the
window. In fact, is makes a tiny window (possibly the size of the
thumbnail or it is using 0). I am not sure if maybe I should preload
the image or something so the browser has the correct original image
size? Well, here is the code:

var a,x;
var winHeight, winWidth;

// Finding the original image src from the thumb src
a = filename.indexOf('thumbs');
x = filename.substring(0,a) +
filename.substring(a+9,filename.length);


anImage.src = x;
winHeight = anImage.height+150;
winWidth = anImage.width+100;




I put in:

if (anImage.height < 1)
{
anImage.height = 500;
anImage.width = 320;
}

....between the x=filename and the anImage.src = x but that didn't work
either. Not sure what is happening. I suppose I should trace it a
bit. As I do that, anyone have any advice?

Thanks,

Josh

 

[Jim Higson]

Hello,

Ok, I wrote a function to blow up a thumbnail image by
replacing the thumbnail with an original size image. When you click
the thumbnail, a new window opens up with the size based on the
original image + 150 or 100 (height, width respectively). Well, I can
get the name of the original image perfectly but when it creates the
new window, it doesn't have the correct size of the image to make the
window. In fact, is makes a tiny window (possibly the size of the
thumbnail or it is using 0). I am not sure if maybe I should preload
the image or something so the browser has the correct original image
size? Well, here is the code:

var a,x;
var winHeight, winWidth;

// Finding the original image src from the thumb src
a = filename.indexOf('thumbs');
x = filename.substring(0,a) +
filename.substring(a+9,filename.length);


anImage.src = x;
winHeight = anImage.height+150;
winWidth = anImage.width+100;




I put in:

if (anImage.height < 1)
{
anImage.height = 500;
anImage.width = 320;
}

...between the x=filename and the anImage.src = x but that didn't work
either. Not sure what is happening. I suppose I should trace it a
bit. As I do that, anyone have any advice?

It looks like you're reading the width and the height from attributes of the
img tag (a better way to do this is with DOM's getAttribute method, but
never mind...). If these properties aren't set in the HTML this'll return
undefined, is treated as zero in addition.

Try either setting the width and height attributes in the HTML, or using
clientWidth/clientHeight, which most of the time should give the
width/height of the image on screen. This isn't a completely standard
property though, so you should check for it's presence first.

 

[Nonee]

The only problem is that the image.src is just being loaded so I
cannot actually check the image size from the screen like you said,
because it isn't being displayed yet. Is there any way to extract the
height / width from an image from just it's source? I mean, if
img.src = "someimg.jpg" doesn't fill the img.width and img.height,
what other way can I do that?

Thanks... : )