Image to display when image not available

Hello does anyone know how to get an image to display if another image is not available?

At the moment I have <img src=“image.mjpg” width=“759” height=“350” name=“webcamImg” id=“webcamImg”/>
It is a live stream but I want to display an image not available image if it is not available.

I know it is probably quite simple but I cannot seem to do it please help! :slight_smile:

On another note does anyone know how to add the images behind an image, as in an advertisement embedded in the image?

One way is to use the <object> tag. Something like this:

[COLOR="#006400"]<object data="image.mjpg">[/COLOR][COLOR="#800080"]<img src="fallback.gif" [/COLOR][COLOR="#B22222"]alt="Live feed not available"[/COLOR][COLOR="#800080"]>[/COLOR][COLOR="#006400"]</object>[/COLOR]

So you have your preferred image specified with the object data attribute, the fallback image specified as an inline image inside the <object>…</object> tags, and finally the alt text for anyone who can’t see images at all.

Another option would be to put the video feed image(s) in a separate directory, and then create an .htaccess file in that directory along the lines of

ErrorDocument 404 /fallback.gif

That way, you just use your <img> tags as normal (making sure you include relevant alt text for people with no images at all), and then if the image you are calling doesn’t exist, it will show the fallback image instead.

So would it be something like <object data=“image.mjpg”><img src=“image.mjpg” width=“759” height=“350” name=“webcamImg” id=“webcamImg”/><img src=“fallback.gif” alt=“Live feed not available”></object> ?

Thanks again for the help! :slight_smile:

Lose the bit in red - the <object> tag is instead of the <img>, not as well as.

The reason for using <object> rather than <img> is that it allows you to have fallback content that is more than just alt text.

Great! But what about the image size? How do I set this? Thanks

If you want to set the size, you can do like this: <object data=“image.mjpg” height=“350” width=“759”>

It is possible to do this via JavaScript yes? Not that I think you should use it in this situation, just curious.

To do what via Javascript? Most things can be done if you put enough effort into them, and as long as you don’t mind alienating a large chunk of people and search engines…

I agree I don’t think there would be any advantage by doing this through javascript maybe a less loading time but apart from that not really any other advantages

Sorry I should have specified. The task of checking whether there is an image to load, and if there is not, then load a seperate one.

The reasons you specify are why I said i did not recommend JS for this, I was simply curious. I have not had much experience with JavaScript. Sorry for derailing this thread minorly :slight_smile:

Ha no fair point :slight_smile: Javascript is great I use it heavily in my site and it is extremely fast for loading etc however search engines hate it :frowning: