Mostrar una imagen diferente en los links rotos de las im?genes

Algunos tienen la mala costumbre de hacer hot-linking en su blog, es decir, andan navegando por la red, encuentran una imagen, consiguen su URL y la usan para mostrar dicha imagen en su blog. Es es el hot-linking, y lo ?nico que hace es que perjudiquemos el ancho de banda del sitio al que le hemos tomado la foto. Pero adem?s de eso corres el riesgo de que el due?o del sitio Web elimine la imagen y te quedes sin ella.

Cuando eso sucede obviamente la imagen ya no se mostrar? en el blog y en su lugar veremos el t?pico icono que representa que una el v?nculo de una imagen est? roto, o sea que el link de esa imagen no funciona.

Pero esa no es la unica raz?n por la que pueda aparecernos ese icono, a veces aun cuando subimos las im?genes a nuestro propio hosting el servidor puede estar ca?do, la conexi?n puede andar lenta, sin querer eliminamos la foto, o simplemente hemos copiado mal la URL de la imagen. En cualquiera de esos casos puede aparecer el icono de la que hablo que indica que la imagen no existe o no carg?.

Lo que veremos hoy es c?mo mostrar una imagen diferente al habitual icono predeterminado que trae el navegador, de manera que podamos cambiar la imagen que se muestra cuando la URL de la imagen est? rota.

As? que cambiaremos esto:

Por una imagen personalizada, como por ejemplo, esta:

Para conseguirlo usaremos un script muy corto que lo que hace es detectar el tama?o ancho de la imagen, si lo encuentra en cero entonces mostrar? la imagen que hemos elegido.
S?lo debes entrar en Dise?o | Edici?n de HTML y antes de </head> pegar lo siguiente:

<script type='text/javascript'>
//<![CDATA[
// Script para sustituir im?genes rotas
function ImagenOk(img) {
if (!img.complete) return false;
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) return false;
return true;
}
function RevisarImagenesRotas() {
var replacementImg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1TH4Iflf-U0TfO8WU117nzJV9rTbT8KS00IJ5JU9WgIdpy8OAadMdjywbhtlFz2UMAl_JVsv2Z9blreVO0H6TBX0Duo7QTB5aKU4XxSOEaT52S9CgGsiE0enZHAz4bsoRfQmTI5GaLdo/";
for (var i = 0; i < document.images.length; i++) {
if (!ImagenOk(document.images[i])) {
document.images[i].src = replacementImg;
}}}
window.onload=RevisarImagenesRotas;
// ]]>
</script>

Lo que est? en color rojo es la URL de la imagen de ejemplo que he puesto, pero puedes cambiarla por alguna que t? dise?es o el icono que t? elijas.

Cabe aclarar, que este script no sustituir? las im?genes de los hostings que a?aden su propia imagen para indicar que la imagen ha sido eliminada como es el caso de TinyPic y Photobucket.
Recuerda que, para evitar en lo mayor posible que las im?genes no se vean, no uses la imagen de alguien m?s, mejor sube tus im?genes a Picasa y as? te evitar?s muchos dolores de cabeza.

El script est? probado en Firefox 5, Google Chrome 12, Opera 11, Safari 5, Internet Explorer 7, 8 y 9. En todos funciona, si no ves el icono personalizado de inmediato entonces tienes que esperar a que cargue el blog por completo.