Aveces hacer hot-linking en su blog, es decir, andar navegando por la red y encontrar una imagen, conseguir su URL y la usan para mostrar dicha imagen en su blog/web.corres el riesgo de que el dueño del sitio Web elimine la imagen y te quedes sin ella.Aunque aveces cuando eso sucede obviamente la imagen ya no se mostrará 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/AVvXsEhWolXUCp1-fbtOzmrUVhC_59xcGv7UAAQQYpivuvDxh_qnq4AUxmAkaUhoFjLMqTGynrASJfsPNw7bVZ_T1MJeqxI0Uz_9dK9xHGspIt1VNhqvyh80FhXtQ_atjpQpLZ7P4iN_UdxmHsg/";
for (var i = 0; i < document.images.length; i++) {
if (!ImagenOk(document.images[i])) {
document.images[i].src = replacementImg;
}}}
window.onload=RevisarImagenesRotas;
// ]]>
</script>Optimizado por :<a href="http://www.recreateoficial.blogspot.com/">Recreateoficial</a>
Opcional:
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 (podria ser el de tu web).Código
---------------------------------------------------------------------------------------------
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.
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 la página por completo.
Fuente: Electrónica
Recreateoficial
