Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Prácticas Javascript

Ejercicios de prácticas para crear elementos interactivos con javascript


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Imágenes I

Visor de imágenes

Introducción al tema

En este tema veremos el tratamiento de imágenes con javascript. Haremos aquí algunas páginas con imágenes dinámicas, es decir o en movimiento, o que van cambiando con el tiempo, o al pulsar el usuario un botón.

algunos de los efectos que podemos conseguir son: presentaciones de imágenes, transiciónes entre imágenes, imágenes móviles o cambiantes...


Planteamiento

En esta página crearemos un sencillo visor de imágenes. En la parte izquierda de la página veremos las imágenes en miniatura, mientras que en el cuerpo central aparecera una de las imágenes en tamaño grande. Al pulsar sobre una imagen en miniatura, la imagen esta aplarece en el visor de la imagen grande.

El script es sencillo, pues no tenemos más que sustituir la imagen actual por la pulsada. También pondremos debajo de la imagen un pie de foto, que coincide con el atributo alt de cada imagen.

Las imágenes que vamos a emplear son las siguientes:

1. India - Agra - El Taj Majal. 2. Albania - Region de Ballsh. 3. Atenas- Partenón. 4. Bélgica - Amberes. 5. Costa Rica - Parque nacional de la Amistad. 6. Egipto - Templo de Abu Simbel. 7. España - Albacete ciudad. 8. España - Tarragona - Acueducto romano.

Aquí mostramos las imágenes en tamañó reducido, pues en realidad tienen un tamaño de 400 por 300px. Si estás siguiendo el ejercicio con nosotros, copia las imágenes para poder utilizarlas en la página.


Código HTML y CSS

El siguiente paso es crear el los códigos HTML y CSS de la página. Haremos una página típica, con una cabecera con el título, un menú a la izquierda, en el que incuiremos las imágenes en miniatura, y un cuerpo principal donde colocaremos el visor de imagen.

El código HTML será el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Visor de imágenes</title> 
</head>
<body>
<div id="cabecera">
<h1>Visor de imágenes</h1>
</div>
<div id="menu">
<img src='foto1.jpg' alt='1. India - Agra - El Taj Majal.' name='fotos1' onclick="mifoto(1)"/>
<img src='foto2.jpg' alt='2. Albania - Region de Ballsh.' name='fotos2' onclick="mifoto(2)"/>
<img src='foto3.jpg' alt='3. Atenas- Partenón.' name='fotos3' onclick="mifoto(3)"/>
<img src='foto4.jpg' alt='4. Bélgica - Amberes.' name='fotos4' onclick="mifoto(4)"/>
<img src='foto5.jpg' alt='5. Costa Rica - Parque nacional de la Amistad.' name='fotos5' onclick="mifoto(5)"/>
<img src='foto6.jpg' alt='6. Egipto - Templo de Abu Simbel.' name='fotos6' onclick="mifoto(6)"/>
<img src='foto7.jpg' alt='7. España - Albacete ciudad.' name='fotos7' onclick="mifoto(7)"/>
<img src='foto8.jpg' alt='8. España - Tarragona - Acueducto romano.' name='fotos8' onclick="mifoto(8)"/>
</div>
<div id="principal">
<div id="visor">
   <img src='foto1.jpg' alt='1. India - Agra - El Taj Majal.' name='fotoVisor'/>
   <div id="titulo">1. India - Agra - El Taj Majal.</div>
   </div>
</div>
</body>
</html>

En las imágenes el atributo alt muestra una descripción de la imagen. Esta será la que veremos como pie de foto. Éstas llevan también el atributo name, distinto en cada uno de ellas para poder identificarlas. Llevan también el atributo onclick que es el que nos permitirá relacionarlas con la función de javascript que cambia la imagen en el visor.

Observa cómo tanto el nombre de archivo como el nombre (name) de las imágenes en miniatura sólo cambia en un número, esto nos permitirá, que con sólo cambiar un número podamos cambiar de imagen en el visor.

Ahora veamos el código CSS que da forma a la página. El él posicionamos las distintas partes de la página, y damos el tamaño a las imágenes, para que las del menú se vean como miniaturas y la del visor en grande. Código CSS:

<style type="text/css">
* { margin: auto; padding: 0; text-align: center }
#cabecera { font: bold 1.3em verdana; background-color: #feffe4;  }
h1 { text-align: center ; padding: 0.5em }
#menu { float: left; width: 25%; background-color: #e3f2ff; }
#menu img { width: 35%; margin: 5%; cursor: pointer; }
#principal { float: left; width: 75%; }
#visor { width: 60%; margin: 10% }
#visor img { width: 100% }
</style>

Con el estilo CSS hemos posicionado las distintas partes de la página, las cuales las hemos distinguimos con distintos colores de fondo. Hemos dado también el tamaño a las imágenes.

Observa cómo mediante la instrucción cursor: pointer; cambiamos el aspecto del cursor al pasar por encima, como si fuera un enlace.

El código escrito hasta ahora nos dará una página como la del siguiente enlace:

Visor - fase 1


El siguiente paso crear el código javascript para poder cambiar la imagen al pulsar la miniatura.


Código javascript

En el código javascript en primer lugar , tras cargar la página, identificamos en el DOM las partes de la página que van a cambiarse. Después creamos la función que va a cambiar la imagen del visor.

En esta función cambiaremos la imagen del visor, y también el título o pie de foto. Para ello nos valemos de que el argumento que le pasamos es el número que diferencia tanto el archivo donde guardamos la foto, como la referencia al DOM mediante el atributo name .

El código javascript será el siguiente:

<script type="text/javascript">
window.onload = function() { //tras cargar la página ...
visor1=document.getElementById("visor"); //referencia al visor
mititulo=document.getElementById("titulo"); //referencia al pie de foto
}
function mifoto(num) { //cambiar la imagen
         f="foto"+num+".jpg"; //ruta de la nueva imagen
         document.images["fotoVisor"].src=f; //cambiar imagen
         t=document.images["fotos"+num].alt; //texto de pie de foto
         mititulo.innerHTML=t; //cambiar pie de foto
         }
</script>

Tras escribir el código en la página comprobamos los resultados. La página quedará como en el siguiente enlace:

Visor - fase 2


Hemos completado la página, en el siguiente enlace damos el código completo de la página:

Código Visor de imágenes.






En la siguiente página diseñaremos una imagen en movimiento, concretamente un coche que va circulando por una calle.

Coche circulando.



Imágenes en prácticas js.

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com