soy Kseso y esto EsCSS

Reemplazo de imágenes en el Html con Css

¿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

·Por Kseso ✎ 12

reemplazo de elementos 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.

avatar del Editor del blog

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