Hi - I just created a new site http://www.cheetahcool.com to show the latest news, technology and videos on the net. To proper format the pictures / images associated with the news item, I use Javascript to resize the image with onload event.

A actual code looks like this: (I removed the "<" at the beginning and the ">" at the end so the following codes does not harm this forum discussion):

input type=image onload='javascript:if(this.width>30) this.width=30' src="http://www.cheetahcool.com/images/cheetahcool2.jpg"


Most of time it functions (both in IE and Firefox) and resize the image properly. However, this is not working consistently as many time the browsers seem just simply not executing the onload javascript at all thus causing the image too large on my site content.

Any one has insight or can offer some advice?

If you're working on a site like this, with the goal of growing it, you should really get rid of the inline javascript. Give all your images that need to be resized a specific class, and then execute a javascript function on the load event for the window to resize the images.

You'll probably need the document.getElementsBySelector function to do this, but that isn't a big deal. I think it's included with the Prototype library. After you have it, do something like this:


window.onload = function()
{
// Find all images to resize.
var images = document.getElementsBySelector('input.thumbnail');
if (!images || images.length == 0) return;

// Resize each image (if necessary).
for (var i = 0; i < images.length; i++)
{
if (images[i].offsetWidth > 30) images[i].setAttribute('width', 30);
}
}

If you do that, all you have to do is make sure your javascript function is on the right pages, and then give all your inputs the thumbnail class.