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.
