Ocultar imagenes con CSS Octubre 18, 2007
Publicado por lineadecodigo en : CSS, JavaScript , trackbackGracias 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
Articulos Similares:
- Calcular el numero de imagenes con JavaScript
- Cambiar el tamaño de la imagen de forma dinamica
- Imágenes como hitos de listas con CSS
- Cambiar dinámicamente una imagen con JavaScript
- Ocultar y mostrar elementos con jQuery
Enviar entrada por email
| 
Imprimir
| 7194 visitas
(Todavia sin evaluar)
Loading ...
Comentarios»
Funciona al 100%, muy practico el ejemplo
Muy weno.
Salu2!
Esta muy bueno me sirvió mucho, gracias.
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……
@jonathan,
Para hacer estas validaciones te puedes apoyar en frameworks como wForms.
En este caso puedes leerte los siguientes ejemplos:
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