Linea de Codigo

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

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

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,...

.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:

<script type="text/javascript">

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";
  }
}
</script>

Visualizar el ejemplo | Descargar el código