alternate image load when original down

[chibianh]

I was wondering if anyone can help me or point me somewhere where I may look up information on how to get an alternate image to load in place of the original of the original image isn't available.

I have a webpage an image linked from my computer. However, it's only available when my computer is on. I want the web page to display another image from somewhere else when my computer is off. How would I go about doing this?

I appreciate any help. Thanks.

 

[ChicoWeb]

Why not just put the image on a computer that will always be up?

 

[Mitthrawnuruodo]

Don't know it this will work if the image is missing, but it's a trick for when you don't know wether a format is supported... You may nest objects:

<object data="path/to/uncertain/image.png" type="image/png">
  <object data="path/to/certain/image.gif" type="image/gif">
    Text rendered if 1) the png or 2) the gif is not displayed...
  </object>
</object>

 

[chibianh]

Why not just put the image on a computer that will always be up?

because the image is dynamically updated and will only be updated when the computer is on. so when the computer is off, the other image will just have "Unavailable" or "Computer off" imprinted on it.

So instead of having an alternate image, can I do it with text? If the original isn't available, just place text in its stead?

 

[Mitthrawnuruodo]

So instead of having an alternate image, can I do it with text? If the original isn't available, just place text in its stead?

Text from the alt-tag will be displayed if the image is unavailable...

<img src="path/to/image.jpg" alt="Text that will be displayed if image is missing..." />

Unfortunately Safari doesn't support this (it's a very annoying bug with Safari), but most other browsers do...

 

[Mitthrawnuruodo]

BTW: I just tested the code from my post above (the nested object tags in post #3), and that works just great, if it finds the first image it shows that, and just that, if that is missing it shows that second image, and if none of them is found it displays the text...

 

[chibianh]

nice! Thank you very much.

 

[mnkeybsness]

you could always use a background image, but then the image would also need to always be a specific width and height...

<img style="display: block; height: 100px; width: 100px; background: url(path/to/alternate.jpg);" src="path/to/main/image.jpg" alt="descriptive text" />