CSS's max-height and max-width - in Javascript? (Also, how to center an image?)

[Chicano]

Hi. I have an image which gets its source changed often, (through javascript) --- (in the next question it says what I am talking about), and I wanted to make it so it had a maximum width and height (so that if a very large image is the one it changes to, it does not disrupt the page and my tables; it simple resizes properly).

I found two great CSS properties, max-height and max-width (well, there are also min-height and width but I don't need those) yet they do not work in IE!

Is there any way to do this in Javascript?

-----------------

Question two:
In my parent document (where I have some iFrames), I have this code:

<div style="position:absolute;top:50%;left:50%">
<form name="MyImage">
<img src="images/spc.gif" id="TheImage" onClick="this.src='images/spc.gif';this.style.border='0px black solid'">
</form>
</div>

spc.gif is just a "placeholder" image. It is a 1px transparent gif.

In one of the iFrames, which is a list of artwork thumbnails, I have the following:

<a href="#" onClick="parent.document.MyImage.TheImage.style.border='5px darkgreen ridge';parent.document.MyImage.TheImage.src='images/Drawings/image1.jpg';return false;"><img src="images/THUMB_image1.gif" border="0"></a><br>

So when someone clicks on the thumbnail in the iFrame, then in the parent frame, the spc.gif placeholder changes into the large image and it has a green ridged border (Which, when clicked, turns back into the placeholder without the border).

Now, I want this to be centered on the screen, so I added a top:50%;left:50% , yet what this does it makes the top left corner of the image be centered, not the whole image... in other words the image starts in the center, but ends quite to the right. How can I place my image in the CENTER of the document... in other words, the center of the image being in the center of the page?

The image I want centered is the same one I want to have a max width and height, since it constantly changes into large or small different images.

Thanks a lot for your help!
-Ian :p

[Chicano]

Anyone? =)

[duniyadnd]

Dunno if this is going to help much, because in a way it seems like you solved it for yourself, when you specify coordinates of windows and images, they look at the top left of the image. You could come up with an algorithm that would shoot the top left image higher up and more to the left. So move it up 75% and see what happens.

Did that help? :rolleyes:

Duniyadnd

[Mr J]

offsetWidth, offsetHeight for IE (I think)

To keep all your images the same size you could try:

<img src="pic.gif" style="width:100; height:100">


And contain the images in a table that would be centered

Maybe?