Ocultar imagenes con CSS

18/Oct/2007 CSS , 11 Comentarios

Gracias a CSS tenemos la posibilidad de ocultar/mostrar las imágenes de un documento. Las utilidades pueden ser diversas:

  • Eliminar las imágenes del texto, dejándolo preparado como "texto limpio" a imprimir.
  • Hacer que la carga en el navegador sea más rápida (nos evitamos el muestreo en pantalla).
  • ....

A la hora de ocultar las imágenes con CSS tenemos dos propiedades CSS: visibility y display.

Mediante visibility lo que podemos modificar el la visibilidad de la imagen. Es decir, la imagen siempre ocupa espacio, aunque puede ser que no se muestre. Los valores posibles de este campo son hidden y visible.

  1. .imagenNO {
  2. visibility: hidden;
  3. }
  4. .imagen {
  5. visibility: visible;
  6. }

Por su parte, display, cuando se muestra u oculta una imagen recoloca el resto de elementos del documento, cambiando su disposición. Los valores posibles son varios: none, list-item, block,...

  1. .imagenNO {
  2. display:none;
  3. }
  4. .imagen {
  5. display:block;
  6. }

Para modificar estos valores on-line utilizamos el lenguaje JavaScript. Para ello creamos dos funciones ocultarImagenes y mostrarImagenes. A ambas funciones les pasaremos un parámetro para indicar si se quiere recolocar o no las imágenes y así utilizar display o visibility.

Para recorrer las imágenes del documento utilizamos el array document.images y su propiedad document.images.length, que nos da el número de imágenes del documento.

Vamos a buscar todas las imágenes del documento marcadas con las clases imagen o imagenNO para cambiar su estado. El hacerlo mediante clases nos permite que si existe alguna imagen que no queramos ocultar nunca (puede suceder cuando presentamos textos a imprimir).

Veamos como serían las funciones:

  1. function mostrarImagenes(recolocar) {
  2. /** recolocar indica que se recoloque el documento **/
  3. /** si no recolocamos, solo ocultamos las imágenes **/
  4.  
  5. for (x=0;x<document.images.length;x++){
  6. if (recolocar)
  7. document.images[x].className = "imagen";
  8. else
  9. document.images[x].style.visibility = "visible";
  10. }
  11. }
  12.  
  13. function ocultarImagenes(recolocar) {
  14.  
  15. /** recolocar indica que se recoloque el documento **/
  16. /** si no recolocamos, solo ocultamos las imágenes **/
  17.  
  18. for (x=0;x<document.images.length;x++){
  19. if (recolocar)
  20. document.images[x].className = "imagenNO";
  21. else
  22. document.images[x].style.visibility = "hidden";
  23. }
  24. }

Hemos visto que se puede ocultar las imágenes con CSS y JavaScript de una forma muy sencilla.

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

11 comentarios en “Ocultar imagenes con CSS”

Víctor Cuervo

doris

gracias!

Víctor Cuervo

Víctor Cuervo

A ti @doris por tu mensaje.

Saludos.

Víctor Cuervo

chavo

es mucho mas fácil tener lo necesario dentro de un panel, de esa manera solo tenes que volver invisible un objeto, de la manera antes descrita

Víctor Cuervo

Víctor Cuervo

@Tony,

Me alegro que te haya servido el articulo.

Saludos
Víctor.

Víctor Cuervo

Tony

Gracias, llevaba varios días buscando una solución para evitar pantallazos en la carga de sliders y gracias a esta técnica, aunque la he tenido que modificar un poco, me ha resuelto el problema.

Muchas gracias.

Víctor Cuervo

Gerardo

la información esta genial, pero hay forma de solo ocultar ciertas imagenes, es decir en mi pagina yo tengo 6 imagenes pero solo ocupo ocultar 2 y mostrar las otras, gracias de antemano

Víctor Cuervo

lineadecodigo

@jonathan,

Para hacer estas validaciones te puedes apoyar en frameworks como wForms.

En este caso puedes leerte los siguientes ejemplos:

Víctor Cuervo

jonathan

nesecito ayuda con un formulario que contenga nombres,apellidos,edad y correo electronico y permita validar dicho formulario (solo letras,solo numeros, correo valido, que no haya campos en blanco). En caso de errores debe ocultar los campos correctos y dejar visibles solo los incorrectos.

lo que me falta es como puedo ocultar las casillas de texto cuando son correctas y mostrar los incorrectos

gracias

por favor ayuda……

Víctor Cuervo

aventura4ever

Esta muy bueno me sirvió mucho, gracias.

Víctor Cuervo

John

Muy weno.

Salu2!

Víctor Cuervo

Tula

Funciona al 100%, muy practico el ejemplo

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*