Ocultar imagenes

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

Eliminar las imágenes del texto, dejandolo 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: visibility y display.

Mediante visibility lo que podemos modificar el la visibilidad de la imágen. Es decir, la imágen 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 imágen 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;}

En la función que creamos en nuestro 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 imágen que queremos que este presente siempre (puede suceder cuando presentamos textos a imprimir).

ocultarImagenes.htm

<html>
  <head>
  <title>Ocultar imagenes</title>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <style>
    .imagenNO {display:none;}
    .imagen {display:block;}
  </style>

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

</head>

<body bgcolor="#FFFFFF" text="#000000">

  <p>Esto es un documento de prueba. Este parrafo tiene una imagen debajo.
     Esto es un documento de prueba. Este parrafo tiene una imagen debajo.
     Esto es un documento de prueba. Este parrafo tiene una imagen debajo.
     Esto es un documento de prueba. Este parrafo tiene una imagen debajo.
     Esto es un documento de prueba. Este parrafo tiene una imagen debajo.
     Esto es un documento de prueba. Este parrafo tiene una imagen debajo.
     Esto es un documento de prueba. Este parrafo tiene una imagen debajo.
     Esto es un documento de prueba. Este parrafo tiene una imagen debajo.</p>

  <p align="center"><img class="imagen" id="i1" src="/imagenes/_logo.gif" width="221" height="44"></p>

  <p><img class="imagen" id="i2" src="/imagenes/dinosaur.gif" width="180" height="200" style="float:left;">
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda. 
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda. 
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda. 
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.
     Esto es un documento de prueba. Este parrafo tiene una imagen a su izquierda.</p>

  <p align="center">
    <a href="#" onClick="ocultarImagenes(true);">Quitar im&aacute;genes recolocando</a> -
    <a href="#" onClick="ocultarImagenes(false);">Quitar im&aacute;genes sin recolocar</a> -
    <a href="#" onClick="mostrarImagenes(true);">Mostrar im&aacute;genes recolocando</a> -
    <a href="#" onClick="mostrarImagenes(false);">Mostrar im&aacute;genes sin recolocar</a>
  </p>

  </body>

  </html>

Autor: aulambra.com
http://www.aulambra.com/ver.asp?id=95

Usuarios que han visto este tema también han visto...

- Aplicacion directa de etiquetas.
- Texto 3D con CSS
- Insertar una imagen de fondo en un TEXTAREA
- Qué es CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento