Ocultar imágenes con CSS

18/Oct/2007 CSS , 13 Comentarios
Ejemplos Programación CSS

Gracias a CSS tenemos la posibilidad de ocultar/mostrar las imágenes de un documento. Las utilidades de este proceso de ocultar y mostrar pueden ser diversas. Por un lado podemos eliminar las imágenes del texto, dejándolo preparado como «texto limpio» a imprimir. Esto lo podemos hacer justo antes de enviar el documento a la cola de impresión. Por otro podemos utilizar para hacer que la carga en el navegador sea más rápida, al evitarnos tiempo de renderizado de la pantalla. Si bien esto sería útil en menos casos. Y seguro que hay más casos en los que se puede aplicar el proceso.

Lo primero que tenemos que saber a la hora de ocultar las imágenes con CSS es que tenemos dos propiedades CSS que nos ayudan con este procesos. Estas dos propiedades son visibility y display. Mediante visibility lo que podemos modificar es 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. Así podremos definirnos dos estilos con estos valores:

.imagenNO {
  visibility: hidden;
}
.imagen {
  visibility: visible;
}

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

.imagenNO {
  display:none;
}
.imagen {
  display:block;
}

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:

function mostrarImagenes(recolocar) {
/** recolocar indica que se recoloque el documento **/
/** si no recolocamos, solo ocultamos las imágenes **/

  for (x=0;x<document.images.length;x++){
    if (recolocar)
      document.images[x].className = "imagen";
    else
      document.images[x].style.visibility = "visible";
  }
}

function ocultarImagenes(recolocar) {

/** recolocar indica que se recoloque el documento **/
/** si no recolocamos, solo ocultamos las imágenes **/

  for (x=0;x<document.images.length;x++){
    if (recolocar)
      document.images[x].className = "imagenNO";
    else
      document.images[x].style.visibility = "hidden";
  }
}

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

Vídeos sobre CSS


13 comentarios en “Ocultar imágenes con CSS”

Víctor Cuervo

javier

esto no sirve, porque te  obliga a  meter esto en  las  miles de  imagenes que  puedas  tener.

Víctor Cuervo

Víctor Cuervo

Buenas Javier,

En realidad no hay que meterlo en muchas partes, ya que el código Javascript recorre todas las imágenes y lo inserta directamente.

Saludos.

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

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

Víctor Cuervo

@Tony,

Me alegro que te haya servido el articulo.

Saludos
Víctor.

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

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

Víctor Cuervo

@jonathan,

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

En este caso puedes leerte los siguientes ejemplos:

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

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.