Retrieving Image Height/Width in IE

[jjalenak]

Using PHP I build an HTML page with several images on it. The image tags look like this (for example):

<img class="ImageClass" id="image1" src="images/image1.jpg" height="300" width="400">

ImageClass simply has {display:none;}. With JavaScript, I can access this image with document.getElementById("image1"), but in IE 5.5+, the height and width are returned as 0, not the values I've specified on the image tag. This works correctly in Mozilla and Firefox. The only thing I can think of is that, since I have display:none, IE is forcing the properties to 0. How can get around this? I really need to get access to the specified height/width so I can dynamically scale the image...

Thanks!

[Bernard Marx]

(not that I've tried, but..)
you could have a go at accessing the properties as attributes instead:

imageRef.getAttribute('width')

[jjalenak]

I've actually tried that, and still get a 0 size. I did find a note on MSDN about using the CSS height and width properties to set the image size, but once again, I get a 0 when I access imageRef.style.height. I'm getting a feeling that I'm simply screwed on the deal, and need to handle the scaling of my images back on the server, and not have the client browser do it...

Thanks.

[kaled]

If your assumption is correct that width and height are zero when display:none, then the likely answer is to wrap the image in a <div> or <span> and set display:none for the wrapper.

Kaled.

PS
I would also test with Opera.

[Rambo Tribble]

Technically, with a specification of display:none the browser isn't required to load the content for the element. Try visibility:hidden instead and see if values are returned (I believe the specification does demand content be loaded with visibility:hidden).

[jjalenak]

Thanks to everyone who responded. I ended up handling the scaling issues through PHP on the server, and simply pushing an <img /> tag on to the page there. Everything seems to work correctly now for both landscape and portrait images.

Thanks again.