cargar otra imagen si la original no existe

atoleon · #1 (**permalink**) 10/11/2010, 10:02

Hola

Me preguntaba si es posible crear una etiqueta img que una imagen alternativa en caso de que la imagen principal no sea cargada o la ruta esté rota.
Es decir, incluir algo en la etiqueta para que muestre una imagen genérica por si no se encuentra la imagen que debería cargar.

Un saludo a todos y mil gracias, como siempre.

DragonX · #2 (**permalink**) 10/11/2010, 10:49

Se me ocurre tal vez puedan darte más ayuda en el foro de PHP

Slds.-

atoleon · #3 (**permalink**) 10/11/2010, 10:58

Si, utilizando php o js seguramente se puede hacer. Lo que yo pretendía era saber si existe algún atributo en la etiqueta img o alguna manera en html de conseguirlo. Para evitar la creación de código para algo como esto.

DragonX · #4 (**permalink**) 10/11/2010, 11:00

no.

slds.-

furoya · #5 (**permalink**) 23/11/2010, 08:40

Existe una combinación de lowsrc con map para Netscape y también hasta IE7, que nunca funcionó. Por lo demás, si una imagen no carga, es un error; y se puede manejar con eventos. Pero es medio riesgoso en algunos casos; ahí debes poner un límite a las recargas o usar una imagen dentro del código fuente.
También puedes aprovechar el alt y meterle un caracter de substitución (␜ , �), o de tachado (☒ , ✕ , ✖ , ✗ , ✘).

La solución más obvia es

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>REEMPLAZO DE IMÁGENES.</title>


<style type="text/css">
img {background-image: url("http://static.forosdelweb.com/images/misc/cross.png"); background-color: white; display: block; margin: 10px; font-size: 40px; font-weight: bold; color: #800000; }
</style>
</head>
<body>
<h2>Carga imagen, si no existe, muestra fondo.</h2>

<img src="http://img338.imageshack.us/img338/7682/relojvillalongafurlongm.jpg" alt="Imagen." title="Imagen." width="640" height="480">

<img src="falsa.jpg" alt=" ✘ Imagen No Cargada." title="Imagen Falsa." width="640" height="480" >
<hr>

<h2>Cajas con el tamaño de las imágenes. Muestra fondos. (Op, FF?, Chr)</h2>

<div style="background-image: url('http://img23.imageshack.us/img23/179/cerbezas.jpg') , url('http://img12.imageshack.us/img12/1940/podrida.jpg'); width: 640px; height: 480px; margin: 10px; " title="Carga primer y segundo background. Muestra primero." ></div>

<div style="background-image: url('falsa.png') , url('http://img12.imageshack.us/img12/1940/podrida.jpg'); width: 640px; height: 480px; margin: 10px; " title="No carga primero y sí carga segundo background. Muestra segundo." ></div>

</body>
</html>

ahorrar codigo html

funcion onerror con parametros

Ver los errores generados por el javascript

Subir imagen con tamaño limite

evento onError para cargar imagen

Comprobar si imagen existe

Css para Imagen no encontrada

Necesito ayuda urgente!!!!!!!

metacortex · #6 (**permalink**) 23/11/2010, 09:27

Cita:

Iniciado por atoleon

Hola

Me preguntaba si es posible crear una etiqueta img que una imagen alternativa en caso de que la imagen principal no sea cargada o la ruta esté rota.
Es decir, incluir algo en la etiqueta para que muestre una imagen genérica por si no se encuentra la imagen que debería cargar.

Un saludo a todos y mil gracias, como siempre.

Tal como te dijeron es mejor que uses PHP, aunque también existe una solución chapucera y simple con CSS: creas una capa con una imagen genérica como fondo CSS. Allí también meterás las imágenes. Cuando no existan imágenes se mostrará el background y listo.

SubZero_mb · #7 (**permalink**) 24/11/2010, 16:54

chapucera pero original jeje. Creas un div con el ancho y alto de la imagen y le pones de fondo la imagen segunda, y dentro del div la imagen principal, si esta no la encuentra solo se vera el fondo, es decir la segunda imagen. El problema que le veo es que algunos navegadores muestran un icono de imagen no encontrada (IE por ejemplo) y otro no muestran nada (Opera y Firefox me parece)

caricatos · #8 (**permalink**) 25/11/2010, 10:00

Hola:

Como soy de javascript, hago un envite con
<img onerror="this.src='alternativa.jpeg'" alt="bla, bla..." />

Saludos

furoya · #9 (**permalink**) 25/11/2010, 10:08

¡Qué bien!. ¡Veo que todos leyeron mi mensaje!

caricatos · #10 (**permalink**) 25/11/2010, 10:22

Cita:

Iniciado por furoya

¡Qué bien!. ¡Veo que todos leyeron mi mensaje!

Ups! (quise decir, ¡joder!... no digo shift porque no sé como se escribe... más de uno pulsaría las mayúsculas...)

Hola furoya, sí que lo había leído, pero por la evolución del tema, se me había olvidado (como al resto de contertulios... -todavía no sé donde usar esa palabreja-)...

Saludos

furoya · #11 (**permalink**) 25/11/2010, 15:44

Pero sí, me imaginé. No hay problema, igual ya estoy acostumbrado

.

Estuve tratando de sacar la lógica de meter varias imágenes de fondo separadas por comas.

En algunos casos pone todas las propiedades, o mejor dicho, los valores juntos. En otros pone el primero válido, y si no recién prueba con el siguiente; pero siempre muestra uno sólo. Las imágenes de fondo y los punteros son ejemplos claros. Ya sé, me vas a decir que los punteros no se pueden superponer, pero no creo que para la sintaxis sea una excusa.

Había un atributo HTML propietario de Netscape que borraba la estampilla que aparece cuando no se carga una imagen, pero ya es historia y no me acuerdo el nombre.

Lo que no estoy seguro de que valide es el formato de texto dentro de la img. En IE no anda, y en la mayoría no está configurada una fuente unicode para los cartelitos, así que la idea de mostrar un signo de tachado termina en un "cuadrito".

Algunas versiones de FF no hacen el cambio de fondo. Pero no me fijé cuáles.

Saludos
furoya