[SOLVED] Image Resizer

[mcmuney]

Can anyone provide a javascript that will resize any image that exists on a page that exceeds a given number to a different size? For example, lets say that an image exists on the page which has a width of 1200. On the script, my criteria for the width is 600. In this example, since the image being displayed at 1200, which exceeds the 600 maximum, it'll display the image at 600.

 

Thanks.

[phpQuestioner]

you don't have to use javascript for this; you can just use css.

 

<style type="text/css">
IMG {width:600px}
</style>

<img src="whatever.jpg" width=1200 height=900>

[mcmuney]

I've tried

img {max-width:500px}

, which works in Firefox, but it doesn't work in IE. I don't know why? Is it possible because the image being displayed does not have the width and height tags? Any suggestions for IE?

[phpQuestioner]

try this (but you will have to give each of your pictures a unique id - you can do this dynamically or statically):

 

<script language="javascript">
function checkSize(wide,what)
{
if (wide > 600) {
document.getElementById(what).style.width="600";
}
}
</script>

<img id="pic1" src="picture1.jpg" onload="checkSize(this.width,this.id)">

[phpQuestioner]

actually try this instead; this version will maintain the current height and only change the width:

 

<script language="javascript">
function checkSize(wide,high,what)
{
if (wide > 600) {
document.getElementById(what).style.width="600";
document.getElementById(what).style.height=""+high+"";
}
}
</script>

<img id="pic1" src="test.jpg" onload="checkSize(this.width,this.height,this.id)">

[mcmuney]

Same problem, it works on Firefox, but not on IE. You had it right the first time, the second version distorts the image.

 

Is it just my IE or what's causing this?

[phpQuestioner]

its work in FFv2.0.0.4 and IE6 (I did not test in IE7, don't have it on this computer - but it should work the same way); because I tested in both. the second version should not distort the image; I made it, so it would only resize the width of the image. the first version I made resized the width with javascript and the browser was automatically resizing the height due to the width size. this was because the image (as you stated) would not have a standard width/height property.

[mcmuney]

I have IE 6.0.29. Do I need a plugin?

[phpQuestioner]

no; try to clear out your cache/temporary internet files and then close the browser and re-open it. then open the example I gave you and it should work fine. sounds like you are having a cache issue; it's pretty common in IE6.

[mcmuney]

Bingo!!! Thanks!!!

[phpQuestioner]

your welcome