Replace Unavailable Images via CSS?

Question

Is it possible to replace the standard broken image via CSS or using another technique? All my images are the same size and my have transparency.

I've tried to wrap all images with a div's background:

<div class="no_broken">
  <img src="http://www.web.com/found.gif"/&gt;
</div>

<div class="no_broken">
  <img src="http://www.web.com/notfound.gif"/&gt;
</div>

CSS:

div.no_broken { 
  background-image: url(standard.gif); 
}

div.no_broken, div.no_broken img { 
  width: 32px; 
  height: 32px; 
  display: block; 
}

But this will display two images on top of each other if the IMG is transparent.

Answer 1

As far as I know, there is no CSS property that controls the display of broken images. Maybe there are browser-specific properties? You may have to resort to Javascript to iterate the images on the page, and replace their src if they are broken.

Answer 2

I don't what technology you are using but in ASP.net there is something called control adapters.

I have used this to capture the PreRender of all images and replace the imageurl if the imageurl is not complete.

I don't know if this relates at all to your situation and certainly will not work when there is a path but not image at the path.

Answer 3

This works without CSS:

<img src="some.jpg" onerror="this.src='alternative.jpg';">

It seems to even work when Javascript is disabled.

Answer 4

This code is JavaScript and will only work when JS is enabled. Weirdly this also works if in IE if the file is accessed from a local machine (with file:///). When the page is accessed with http it won't work without JS.