El problema no es que no ande en algunos navegadores,porque si lo ignoran no aparece la imagen y ya. Lo que no entiendo es lo del 'pixel'. Si pones como alternativa una imagen de
1px de lado, tiene que verse con esa medida. Pero de última, si quieres, aprovechas el javascript para cambiarla en el atributo o en la propiedad CSS.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var pixel1 = (new Image()).src = "http://img145.imageshack.us/img145/8876/lamp1cf6.gif";
function cambia(T){
//alert("Cambia");
T.width = "100"; //cambiar por "1"
T.height = "100"; //cambiar por "1"
T.src = pixel1;
T.alt = "Otra imagen.";
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>Reemplaza imagen rota con escript. IE, Chr, FF, Op.</h2>
<img src="imagenRota.jpg" onerror="cambia(this)" alt="Una imagen." >
</body>
</html> Haciendo memoria, me parece que había un atributo para cambiar a una imagen alternativa, si la original no estaba o pesaba mucho. Pero jamás la vi funcionando, así que debió ser una propuesta, o un código propietario, o nunca lo implementaron. Una duda es cómo se manejaba con el
alt.
Un detalle antes de que prueben el código :
es un peligro. Veamos. Si la primer imagen no existe, se dispara el evento y al cambiar el
src se carga la segunda.
¿Y si la segunda tampoco está?. Se dispara el evento, y al cambiar el
src se carga otra vez la segunda, que no está. Entonces se dispara el evento, y al cambiar el
src se carga otra vez la segunda, que no está. Entonces se dispara el evento ...
En
IE no debería haber mucho problema, en algún momento va a poner el cartel de "Volcado de Pila" (o "
Stack Overflow", si la versión es en inglés) y el escript se para solo. En
Firefox me parece que esto no ocurre, y al final se debe "colgar".
Ni se imaginen las cosas lindas que va a decir del diseñador cualquiera que abra esta página.
Onload es más compatible, pero si lo usamos igual, terminamos con el mismo drama. El truco sería hacer una precarga. Para que sea más fácil, supongamos que nuestra etiqueta
<img> arranca con la imagen de 1 pixel. En algún lugar tenemos otra etiqueta —escondida, reducida, fuera de la vista— que carga la imagen principal y que sí tiene el evento
onload. Si esa no se carga, la función no se dispara y nuestra imagen "visible" se queda con la de 1 pixel. Pero si se carga, ya sabemos que existe, y la función la mete en el
src de la que nos interesa. A
Opera le basta para disparar el evento que haya un
src escrito, así que mucho no nos sirve.
Hay muchas variaciones para esta misma idea. Acepto sugerencias.
Aunque lo mejor sería hacerlo a nivel servidor. Recuerdo un tema (lo busco y lo pongo al final) donde se llegó a esa conclusión para no usar
onerror,
onload ni algún javascript.
Subir imagen con tamaño limite Ver los errores generados por el javascript ahorrar codigo html (sí existía, pero era para otra cosa)