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 ✎ 6

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.

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 Don Kseso Kseso

Comentarios: 6

  1. Oye, me ha sorprendido el sistema.

    Esto 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í?

    ResponderEliminar
    Respuestas
    1. Sí, Oloman.
      Sí 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

      Eliminar
  2. 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

    ResponderEliminar
    Respuestas
    1. Hola Jacobo
      Css 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

      Eliminar
  3. Aaahh, una pena, eso ya sería bestial xD. Pero bueno, muy buena entrada igualmente :)

    ResponderEliminar
  4. genial! 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.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap