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 III

Presentación

Planteamiento

En esta página crearemos un visor de imágenes en el que moveremos las imágenes mediante botones. Los botones que pondremos serán el de avance y retroceso, para avanzar o retroceder una imagen, y el de principio y fin, para ir al principio o al fin de la presentación.

El paso de una imagen a otra lo haremos mediante el desplazamiento de las imágenes. Al pulsar en avanzar la imagen actual debe desplazarse y salir por la derecha de la pantalla, a la vez que la nueva imagen entra por la izquierda, y ocupa su lugar. Para la tecla retroceso el proceso debe ser inverso, es decir las imágenes se desplazan hacia la izquierda.


Imágenes que vamos a usar.

Tenemos que usar dos tipos de imágenes, en primer lugar las fotos de la presentación. Nosotros utilizaremos las mismas que hemos usado en la página "imagenes I" y 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.

Por otro lado están las imágenes de los botones que vamos a usar, estos son las siguientes:

principio retroceso avance final

Una vez que tenemos las imágenes empezaremos a crear los distintos códigos que componen la página.


Código HTML

El siguiente paso es construir el código HTML que utilizaremos para la página. Para el visionado de imágenes haremos dos apartados o divs. En el primero pondremos la imagen a mostrar. y en el segundo pondremos los botones y el pie de foto. Veamos el código y luego lo comentamos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Presentación</title>
<link rel="stylesheet" type="text/css" href="presentacion.css" media="all" /> 
<script type="text/javascript" src="presentacion.js"></script>
</head>
<body>
<h1>Presentación de fotos</h1>
<div id="visor">
   <div id="fotoEntra">
   </div>
   <div id="fotoSale">
      <img src="foto1.jpg" alt="1. India - Agra - El taj Majal." width="400" name="fotos">
   </div>
</div>
<div id="piefoto">
   <div id="controlesre">
      <img src="rew.gif" alt="principio" width="30" onclick="mueve('prin')" />
      <img src="atras.gif" alt="atras" width="30" onclick="mueve('retro')" />
   </div>
   <div id="controlesav">
      <img src="play.gif" alt="avance" width="30" onclick="mueve('avance')" />
      <img src="avv.gif" alt="final" width="30" onclick="mueve('fin')" />
   </div>
   <div id="mititulo">1. India - Agra - El taj Majal.</div> 
</div>
</body>
</html>

Veamos cómo está construida la página:

Ahora debemos posicionar y dar estilo a todos estos elementos mediante el archivo CSS.


Código CSS

En el archivo CSS posicionaremos las distintas cajas que forman el visor de la presentación. Lo haremos en todas ellas mediante posicionamiento absoluto, y con la unidad de medida en pixels, de esta manera nos aseguramos que el aspecto será el mismo aunque se cambie de resolución de pantalla.

El archivo CSS será el siguiente:

h1 { font: bold 1.5em garamond; text-align: center; }
#visor { position: absolute; left: 300px; top: 100px; width: 400px; height: 300px;
			 background-color: aqua; overflow: hidden;  }
#visor img { width: 400px; }
#fotoSale { position: absolute; top: 0px; left: 0px; }
#fotoEntra { position: absolute; top: 0px; left: 0px; }
#piefoto { position: absolute; left: 300px; top: 400px; width: 400px; height: 30px;
			 background-color: silver; }
#controlesre { position: absolute; top: 0px; left: 0px; }
#controlesav { position: absolute; top: 0px; right: 0px; }
#mititulo { position: absolute; top: 5px; left: 70px; font: normal 12px arial; }

La mayoría de instrucciones van dirigidas a posicionar y dar tamaño a las cajas que forman el visor y el pie de foto.

Observa la instrucción overflow: hidden del selector #visor, la cual nos permitirá ver sólo la imagen o parte de la imagen que se encuentre dentro del límite del visor.

Como detalle hemos puesto la instrucción cursor: pointer aplicada a los botones de las imágenes. Esta hace que al pasar el cursor por encima de estos botones, éste cambie de forma, dando a la página un aspecto más profesional.

El aspecto de la página es ya el mismo que tiene al acabar de cargarse, y quedará como en el siguiente enlace.

prensentación _ fase1


Lo que hemos hecho hasta ahora es una página estátioa. Debemos añadirle el archivo javascript para poder incorporar el resto de fotos y que funcionen los botones de ir hacia adelante o hacia atrás.


Código javascript

En el código javascript haremos tres partes. En la primera indicamos toda la información necesaria para el desarrollo del script; es decir los datos que vamos a utilizar y los lugares de la página que se modificarán. En la segunda parte desarrollamos la función que activamos al pulsar los botones de avance o retroceso. la tercera son las funciones que activan o desactivan el temporizador para realizar las transiciones de imágenes. Veamos, cómo es el código.


Datos necesarios

En primer lugar creamos un array en donde cáda elemento es el código HTML necesario para ver cada una de las imágenes:

misFotos=["<img src='foto1.jpg' alt='1. India - Agra - El Taj Majal.' name='fotos0'>",
          "<img src='foto2.jpg' alt='2. Albania - Region de Ballsh.' name='fotos1'>",
          "<img src='foto3.jpg' alt='3. Atenas- Partenón.' name='fotos2'>",
          "<img src='foto4.jpg' alt='4. Bélgica - Amberes.' name='fotos3'>",
          "<img src='foto5.jpg' alt='5. Costa Rica - Parque nacional de la Amistad.' name='fotos4'>",
          "<img src='foto6.jpg' alt='6. Egipto - Templo de Abu Simbel.' name='fotos5'>",
          "<img src='foto7.jpg' alt='7. España - Albacete ciudad.' name='fotos6'>",
          "<img src='foto8.jpg' alt='8. España - Tarragona - Acueducto romano.' name='fotos7'>"]
	muestra=0

Cada elemento del array es el trozo de código HTML necesario para ver una imagen. En él el atributo alt contiene el texto que aparecerá al pie de la foto. El atributo name nos permitirá localizar la imagen en el DOM para poder manipularla. Los elementos de este array nos permitirán sustituir el código que nos lleva a la foto actual por el código de la nueva foto que queramos ver.

Por último la variable muestra indica el número de foto o elemento del array que es visible. Como iniciamos la página con la primera foto su valor inicial es 0. Cambiando este valor y llamando luego al array, tendremos los distintos códigos necesarios para ver cada foto.

Debemos después localizar en el DOM los distintos elementos donde se producirán los cambios. Esto debe hacerse después de haber cargado la página, de ahí que los pongamos dentro de la función window.onload = function(). El código, lo añadiremos a continuación del anterior, y es el siguiente:

window.onload = function() {
pantalla=document.getElementById("visor");
titulo=document.getElementById("mititulo");
foto=document.getElementById("fotoSale");
fotoAnt=document.getElementById("fotoEntra");
}

Los elementos a que hacemos referencia son los siguientes:

Estos son los elementos que sufrirán alguna variación al pulsar los botones para cambiar la imagen.


función de cambio de imagen

En el código HTML hemos puesto en las imágenes de los botones de avance y retroceso atributos onclick con referencia a la funcion mueve() de javascript. En cada botón, la función lleva un argumento distinto. Esta función es la que hará que cambiemos de imagen al pulsar el botón. Veamos cómo construir esta función:

function mueve(opcion) {
         anterior=misFotos[muestra];
         fotoAnt.innerHTML=anterior;
				 

En primer lugar buscamos la foto actual en el array y la colocamos como foto saliente.

La función no acaba aquí, ya que el siguiente paso es indicar qué condiciones cambian según el botón pulsado. Para ello nos valdremos del argumento pasado a la función. Mediante una estructura switch indicamos qué valores cambian con cada botón:

function mueve(opcion) {
         anterior=misFotos[muestra];
         fotoAnt.innerHTML=anterior;
         switch (opcion) {
         case "avance":
         muestra++;
         if (muestra>7) { muestra=0; }
         estilo="derecho";
         break;
         case "fin":
         muestra=7
         estilo="derecho";
         break;
         case "retro":
         muestra--;
         if (muestra<0) { muestra=7; }
         estilo="izquierdo"
         break;
         case "prin":
         muestra=0
         estilo="izquierdo"
         break
         }

El nuevo código añadido a la función (en color siena), indica las variables que necesitamos que cambien para cambiar la imagen. estás son:

Por último completaremos esta función con unas líneas que nos llevan a la función que realiza la transición de las imágenes:

function mueve(opcion) {
         anterior=misFotos[muestra];
         fotoAnt.innerHTML=anterior;
         switch (opcion) {
            ....
            ....
         break
         }
         ver=misFotos[muestra];
         mueveFoto = 400;
         mueveFoto2=-400;
         completado=setInterval(transicion,40);
         }	

Para no repetir todo el código anterior, hemos puesto puntos suspensivos. El nuevo código consta de lo siguiente:

Cerramos la función, y vamos al siguiente paso, el cual es poder activar y desactivar el temporizador que realiza la transición entre imágenes.


Transición de imágenes

La instrucción setInterval(transicion,40), indica que la función llamada transicion() se repite cada 40 milisegundos, es decir la repetimos 25 veces por segundo. Crearemos ahora esta función, en la cual, mediante un desplazamiento corto y progresivo de las imágenes, (10px por repetición) haremos que éstas se muevan en la pantalla. Haremos dos tipos de movimiento, de derecha a izquierda para el desplazamiento al avanzar imagenes, y de izquierda a derecha, para el retroceso de imágenes. Es por esto que en la función anterior hemos distinguido entre botones que tienen el estilo "derecho" y el estilo "izquierdo". El cambio de la posición de las imagenes la realizaremos cambiando las propiedades CSS referentes a la posición de las imágenes (en concreto el valor de la propiedad left.

Esta es la función que realiza la transición entre imágenes:

function transicion() {
         if (estilo=="derecho") {		 
            mueveFoto-=10;
            mueveAnt=mueveFoto-400;
            cambioFoto=mueveFoto+"px";
            cambioAnt=mueveAnt+"px";
            foto.style.left=cambioFoto;
            fotoAnt.style.left=cambioAnt;
            foto.innerHTML=ver;
            if (mueveFoto<=0) {
               parar()
               }
            }
         else if (estilo=="izquierdo") {	 		
            mueveFoto2+=10;
            mueveAnt=mueveFoto2+400;
            cambioFoto=mueveFoto2+"px";
            cambioAnt=mueveAnt+"px";
            foto.style.left=cambioFoto;
            fotoAnt.style.left=cambioAnt;
            foto.innerHTML=ver;
            if (mueveFoto2>=0) {
               parar()
               }
            }
         }

En la función hay dos condicionales, la primera realiza la transición de derecha a izquierda, y la segunda de izquierda a derecha, ambas son muy similares. Las primeras seis líneas mueven 10px hacia la izquierda o hacia la derecha las imágenes en cada repetición. La siguiente línea muestra en pantalla la imagen nueva. y por último una estructura if nos lleva a la función parar() la cual para el desplazamiento cuando la imagen nueva ha sustituido completamente a la antigua.

Debemos ahora crear la función parar(), la cual para la repetición de la función anterior iniciada mediante setInterval(). Esta función es la siguiente:

function parar() {
         clearInterval(completado);
         numFoto="fotos"+muestra;
         eltitulo=document.images[numFoto].alt;
         titulo.innerHTML = eltitulo;
         numff=muestra+1;
         fotoFondo="foto"+numff+".jpg"
         imagenFondo="url("+fotoFondo+")";
         pantalla.style.backgroundImage=imagenFondo
         }

La función además de parar el temporizador mediante la instrucción clearInterval, cambia el pie de foto al de la imagen nueva (tres siguientes líneas) y después pone como imagen de fondo del visor la foto actual.

Esto último se hace porque en el cambio de imágenes hay un breve instante en el que quitamos la foto antigua para poner la nueva, esto crea un instante en el que el visor se queda sin ninguna imagen. Si colocamos esta imagen en el fondo, como es la misma que la que ya hay, esto no se nota.

La página ya está completa, y podemos ver su funcionamiento en el siguiente enlace:

Presentacion


Por último, en el siguiente enlace mostramos los códigos comentados de los archivos empleados para realizar la página anterior, es decir el HTML, el CSS y el Javascript:

Código de Presentacion






En las siguientes páginas haremos una presentación automática de imágenes en la que podemos elegir el tipo de transición entre las mismas.

Transiciones I



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