Galería de imagenes mediante combo con JS
Escrito por J.F. el Lunes, 9 de Julio del 2007 a las 13:52
Este ejemplo es una galería de imágenes muy simple realizada mediante un combo combinado con Javascript. Su utilización es muy simple. En el head de nuestra página declararemos un array con todas las imágenes que queramos utilizar. El nombre de dichas imágenes deberá ser: imagen1.jpg, imagen2.jpg,..., imagenx.jpg. También declararemos la función fotoo, para msotrar en función de la opción del combo elegida la imagen correspondiente. Veamos el código que ha de ir en el head.
-
var imagenes=new Array("imagen1.jpg","imagen2.jpg","imagen3.jpg",...);
-
var indice=0;
-
-
function fotoo(indice)
-
{
-
foto.src=imagenes[indice];
-
}
A continuación en el documento HTML declararemos la imagen por defecto que queremos mostrar y el menú de selección a través del cual elegiremos qué imagen mostrar, llamando a través del evento onClick a la función fotoo pasandole el valor de la imagen correspondiente. Veamos el body entero:
Observese que se comienza por el valor 0, por lo que la foto 2 lleva como value 1, y la foto 3 lleva como value 2. Para que la galería de imágenes quede elegante y estética es conveniente que las imágenes sean del mismo tamaño, aunque no es indispensable para uso. El resto de la apriencia es cuestión de personalizarlo a nuetsro gusto con CSS.
Ejemplo: | Galería de imágenes con combo Javascript
Categoria: Javascript
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
Entradas relacionadas
Deja un comentario
