JMiur [E]

Por defecto, en Firefox, cuando una imagen no se encuentra no pasa nada, el espacio que debería ocupar no se muestra. En Internet Explorer y Chrome, por ejemplo, esto es diferente, si la imagen no pudo ser cargada, se muestra un ícono y, eventualmente, el texto del atributo ALT.

Según Mozilla, si la imagen tiene definidos un ancho y un alto, deberíamos ver un ícono pero, eso no ocurre siempre. También dicen que hay una propiedad que controla eso, llamada -moz-force-broken-image-icon; un valor de 1 forzaría a que se muestre ese ícono y tampoco veo que funcione en todos los casos.

Lo que suele ocurrir son cosas así:

En este es un ejemplo: <img src="nada.jpg" alt="" /> como esa imagen no existe, en Firefox no vemos nada a menos que le pongamos el atributo ALT, en cuyo caso, lo que veremos será el texto de ese atributo:
<img src="nada.jpg" alt="aqui deberia verse la imagen" />
aqui deberia verse la imagen

Con CSS, hay algunas particularidades de los navegadores de Mozilla que podemos utilizar para cambiar esto.

El pseudo-elemento -moz-broken nos permite agregar propiedades que se aplicarán a las imágenes que no puedan ser cargadas; por ejemplo, podríamos agregarles un borde y un color:
img:-moz-broken { border: 1px solid red; color: red }
Este es el mismo ejemplo anterior, una imagen sin el atributo ALT:

y este con el atributo ALT aqui deberia verse la imagen

esta imagen, en cambio existe: aqui deberia verse la imagen

Lo mismo, podría hacerse con casi cualquier otra propiedad, por ejemplo, una imagen de fondo alternativa o podríamos crear dos definiciones, una para las imágenes en general:
img:-moz-broken { color:#C6211A; font-family: Tahoma; font-weight: bold; }
y otra para las imágens que no tengan el atributo ALT:
img[alt=""]:-moz-broken:after {
background: transparent url(URL_imagen) no-repeat 0 0;
content: "error" !important;
padding-left :20px;
text-decoration: blink;
}
Estos son los mismos dos ejemplos anteriores:


aqui deberia verse la imagen

4 comentarios:

Gem@  

Un paso adelante en ese tema, pero si seguimos así para tener en cuenta todos los navegadores vamos a necesitar el doble de códigos.
Pero bueno, al menos son mejoras y como tal hay que verlas.

Responder
Adrux  

Hola JMuir: Recibo la suscripción a Vagabundia en mi cliente de correo por 2 canales: vía email (configurado para no mostrar imagenes) y vía canal de suscripciones (donde se muestran) En donde: esta imagen, en cambio existe: En el primer caso no se puede observar y en su lugar aparece: Aquí debería verse la imagen. Y en el segundo: se ve el logo.
En estas aplicaciones, creo solo aparece texto en lugar de imagen (bloqueada) si contiene algún enlace. Por lo cual y aunque los clientes de correo no sean parte de este juego que propones, presumo que acabas de "cambiar el rumbo de esta hstoria".
AH ! y este comentario es extenso, en deuda por los que no realice, mirando tus Post tratando de aprender.

Responder
JMiur  

Gem@:
Así es, se está tornando complicado :D

Adrux:
La longitud del comentario no importa :D
Cómo reaccionan los lectores de feeds o los mails es difícil de controlar o mejor dicho, imposible, cada uno l ohará a su modo; los datos enviados son siempre los mismos pero los diferntes programas los manejan de diferente modo.

Responder
Adrux  

Está claro. (este es corto) :)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR