Reemplazo de imágenes en el Html con Css 22.5.13
¿Necesitas reemplazar cualquier elemento del html sin poder acceder a él? Pues hazlo de forma sencilla y límpia utilizando sólo Css. El crédito y autoría del original a pie de artículo.
Reemplazo de imágenes en el Html con Css
¿Te has encontrado alguna vez queriendo sustituir una imagen colocada vía <img src=''.../> sin tener acceso al Html y sin poder hacer uso de javascript?
Pues es sencillo. Más de lo que pudiera parecer a priori. Y además de sencillo lo único que necesitas es un poco de Css y su magia.
Y de propina válido no sólo para imágenes. Cualquier otro elemento del html es susceptible de ser reemplazado con esta técnica.
¿Vemos cómo?
Para lograrlo sólo necesitas recordar la existencia de la propiedad box-sizing. Si no la conoces o usas en ese enlace tienes información, así como sobre las diferencias con otros modelos de cajas en Css.
Supongamos que tienes un Html inaccesible tal como el siguiente:
<!-- bla bla bla -->
<div class="una_clase">
<img class="imagen_molesta" src="http://DOMINIO1.com/engorro.jpg"/>
</div>
<!-- Más bla bla bla -->
Sólo hay que ir al Css y añadir una regla tal como la siguiente para que la "imagen_molesta" deje de serlo:
.imagen_molesta {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://DOMINIO2.com/me-gusta-mas.jpg) no-repeat;/* La imagen sustituta */
width: 170px; /* La anchura de la nueva imagen */
height: 250px; /* La altura de la nueva imagen */
padding-left: 180px; /* Igual a la anchura de la nueva imagen */
}
¡Eureka! la imagen no deseada ha desaparecido de la vista y en su lugar ya tenemos la que deseamos
Esta técnica ademas tiene otras ventajas. Como:
- Es posible utilizarla con cualquier otro elemento, aunque sean vacíos como lo es una imagen, como <hr/>
- El soporte podría decirse que es cuasi universal: Chrome, Firefox, Opera, Safari, IE8+. Puedes verlo en caniuse.
- Y mejor sustituir al elemento no deseado que ocultarlo con un display: none. Incluso en términos de SEO.
Puedes verlo en funcionamiento en el siguiente pen:
Check out this Pen!
Y una aplicación por @Oloman
Y para quienes se preguntan por una aplicación práctica, @Oloman en su blog encontró un caso concreto de uso de esta técnica: Emergencia Blogger: Recuperar imagen del propio avatar tras borrarlo.
Créditos y Autorías
Este artículo es una mera difusión en español del original, obra de Chris Coyier publicado hace unos días en css-tricks.com
Pasa por él para ampliar un poco más la información, tanto con el artículo original como con las aportaciones de sus lectores en los comentarios.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Oye, me ha sorprendido el sistema.
ResponderEliminarEsto es porque el padding es mayor que el tamaño de la caja, lo que en unión de border-box hace que dicha caja pase a ser de ancho cero ¿es así?
Sí, Oloman.
EliminarSí si por anchura (no tamaño) te refieres a la propiedad 'width' como creo que haces.
Y no eres el único sorprendido. Yo también.
Es una de esas cosas que cuando las ves dices: "es tan sencillo y lógico que parece mentira que a nadie, ni a mi, se le haya ocurrido antes" ;-)
Un saludo
Y de esta forma si alguien entra en una web no estaria cargando el contenido del html? porque ese es uno de los problemas con las webs responsives
ResponderEliminarHola Jacobo
EliminarCss no interviene en lo que sirve y cómo el servidor, en el sentido de que lo que hay en el html el servidor lo manda al navegador.
No es esa su función ni cometido.
Este "truco" es para situaciones muy muy concretas y salir del paso: no tener acceso más que al css.
Un saludo
Aaahh, una pena, eso ya sería bestial xD. Pero bueno, muy buena entrada igualmente :)
ResponderEliminargenial! me ha servido. He tenido que añadir !important al padding-left porque sino me lo obviaba y no lo hacía. También he cambiado el display a "inherit" para evitar que me lo coloque en otra línea (no deseado en mi caso), lo comento por si a alguien le sirve. Gracias por el truco.
ResponderEliminarFunciona perfecto, gracias
ResponderEliminarBuenos días , hay alguna manera modificando el css de saber que hay detrás de una imagen que ha sido tachada? Gracias de antemano.
ResponderEliminarBuen Día, Bachata Barcelona.
EliminarTemo que no entiendo la consulta. Antes de que venga alguien con más conocimiento, te sugiero que especifiques un poco.
¿Cómo está puesta la imagen? Simplemente con un cambio de display u opácity (por ejemplo) ya se hace invisible como para ver lo que hay detrás en el documento; sin importar el tachado.
¿Y a qué llamas tachado? Es un formato de elemento, generalmente para textos, que no impide ver a ese elemento y no afecta lo que hay detrás de él.
A menos que sea una imagen que simula un tachado y estés preguntando cómo quitarla, lo que nos devuelve al principio.
Furoya, yo apostaría a que pregunta por las imágenes no cargadas (error 404 not found).
EliminarPero como sigo sin reponer las pilas a la bola del adivino ;-) vamos a esperar a que Bachata Barcelona nos lo aclare.
Un saludo a ambos.
Bien. Si después de un mes el amigo Bachata Barcelona no volvió, o ya resolvió su problema y se olvidó de nosotros, o simplemente ... se olvidó de nosotros.
EliminarSi realmente quería eliminar la estampilla de imagen ‘no cargada’ con CSS, supongo que no hay manera; [code]img {-moz-force-broken-image-icon: 0;}[/code] es el default, así que Mozilla ya no lo muestra si hay un ‘alt’, y hasta donde sé no tiene equivalente en otros navegadores.
El método más común es usando javascript
[code]< img src=”rota.???” onload=”this.style.visibility=’hidden’” >[/code]
pero oculta todo.
Aunque también hay algún truco HTML, como usar la etiqueta ‘object’ en vez de ‘img’, porque no pone el ícono de imagen rota, ni tampoco el ‘alt’. Estamos en la misma, pero al menos funciona con JS desactivado, y dentro de una ‘figure’ hasta es semántico.
Digo todo esto como para aprovechar el comentario publicado.
Un saludo.
Antes de que me corrijan; sí, hay un error en el ejemplo del escript. Ése oculta la imagen si se carga, y la deja visible si no la encuentra (justo al revés de lo que queremos) El código correcto sería
Eliminar[code]< img src=”rota.???” onerror=”this.style.visibility=’hidden’” >[/code]
Perdón.