Alternate Image?

[Palehorse]

Howdy,

I am hoping somebody might be able to assist me. What I want to accomplish may not even be possible, but it is worth a shot.

With an <IMG> tag, we are able to use the "alt" property to display text to a user should the image not be available. What I am trying to figure out is if there is a way for me to just display a different image if the primary one is not available.

I was thinking there would be a way - sort of like you can specify many different font-names in a style sheet - is there a way to specify different images some how?

I want this to be client-side - I can do check via server-side to see if the image even exists before I try to display it, but do to some other issues, I can't do that. Basically, if "image1.gif" is not there - I want it to display "image2.gif" and I was wondering if there is a way to do this...any help is appreciated :)

[erisco]

Javascript? rewriting? I am really not too sure without something server-side. I am not sure about rewriting either. Javascript may be the only other answer... but the alt attribute is meant for and will only work for text. This is for people viewing pages without image support/enabled... or indeed for your occasional broken link, but more-so for the former.

[Jon Hanlon]

There is an attribute of the <img> element called lowsrc which is used on slow links as a low resolution source. The browser tries to load this image before the main one, so you could set this to be your alternate.
The other way is to have a bunch of images (probably in a hidden <div>) and to check the complete property of each, then use this information to set your main images.

[Palehorse]

I'll look in to that "lowsrc" as well as the "complete" property - I wasn't aware of those. Thanks for the info.

[Master Bunny Fu]

Additionally, the onLoad event handler for an image will only be triggered if the image is succesfully loaded.