Specify missing image icon [duplicate]

Question

Possible Duplicate:
jQuery/Javascript to replace broken images

This should be easy I just don't know the terminology to be googling for. I think this is HTML/CSS, if an image link is broken it often shows a missing image icon showing a page with red, green, blue shapes. In HTML is it possible to configure "use this image if an image link is broken?"

Answer 1

An 'onerror' example:

<img src="fail.jpg" onerror="this.src='https://www.google.com.br/logos/2012/montessori-res.png';">

http://jsfiddle.net/u4hQd/

Answer 2

I think the heart of this is how to add dynamic functionality to CSS. I don't know of an if/else check in CSS apart from detecting browsers, however, this is what I would do if I ever need to do something like this.

If you are using php you can do this:

$imagename = "image.png";
if (file_exists($imagename)){
   echo '<p class="exists">';
} else {
   echo '<p class="dne">';
}

Then in the css you can have

.exists{background:url("../img/git-sprite.png") no-repeat 0px -32px;}
.dne{background:url("../img/git-sprite2.png") no-repeat 0px -32px;}

This way you can add an if/else functionality for this in the CSS itself. You don't have to use PHP, I'm sure a javascript would work as well