Any good with javascript?

[Brujah]

I have some blog entries imported that include images. Some of the images exceed the width of the column. The column is 450 pixels that I'm working with. If possible I would like a way to detect the image size onload and resize it to 450 if it's width is greater. Like the images on this forum do.

[Brujah]

Testing ...

[woj]

don't be lazy, just look in the source html of this board to see how it's done...

[Brujah]

fine woj, help me out then! :p

here's what I'm trying to do..
http://www.clickmojo.com/imagetest.html

I'd like to make it something I can just put in the header that will automatically resize images inside the div id = post so I don't have to edit each image entry.

If I can't do it that way...

I'd like to make it as easy as possible so I can just add a small function to each image like .. onload = ' imgResize ' and onclick = ' imgFull ' or something of that nature.

[Tempest]

Play with this.. I put it in a page onLoad event and it worked ok in Opera. Didn't test it in other browsers. Keep in mind the images will look crappy.

for(i=0;i<document.images.length;i++){
if(document.images[i].width > 450){
document.images[i].width=450;
}
}

[Brujah]

Tempest, I'm using Opera too.. check this out.. very nice solution but probably doesn't work for IE.

style = max-width:450

[Brujah]

Found an IE fix, using 'expression' css

So like;

#thepost img {
 width:expression( document.body.clientWidth > 450? "450px": "auto" );
 max-width:400px;
}

[Tempest]

Nice... Can you do the clicking thing??

var oldwidths=new Array();
var maxwid=450;
function resimgs(){var i;var img;
for(i=0;i<document.images.length;i++){
img=document.images[i];
if(img.width > maxwid){
oldwidths[img.name]=img.width;
img.width=maxwid;
}
}
}
function clkimg(img){
if(img.width > maxwid){
img.width=maxwid;
}else if(oldwidths[img.name]){
img.width=oldwidths[img.name];
}
}

for the body tag
onLoad="resimgs();"

for each applicable image

<img src="" name="img1" onClick="clkimg(this);">

each image has to have a unique name. The one problem is that this solution will curently resize ANY image (including banners).. You could put in a name check though and make sure any images you possibly want resized start with a string that you would check for. Let me know if you need that code as well.

Works in IE, Opera, Netscape 7 and 8 but my Firefox is broken so couldn't test it.

Clicking on the images toggles between full and min size.

[Brujah]

I appreciate the brainstorming The best solution for me currently would be one that didn't require any change of the img src. Mine are already wrapped in a div id=hahahahahaha so the css #post method is ideal. Just a quick addition to the style.css and I'm gold.

If I could add a clickable link without having to edit the img src tags, that would rock. I'm not sure if the 'expression' will allow that.

[Tempest]

well.... if you don't want to change the current page source, then you'd have to hack in some code to do a global click event and then filter it down to just the images within the div... but... you probably lose the original image size by using the style so there wouldn't be any way to size it big again...