HTMLWeb - WebScript - Ventanas - Visualizador de imágenes I

manuales - recursos - gráficos - programación...

Home - HTMLWebScript - Ventanas - Visualizador de imágenes - 1 - 2 - 3

Visualizador de imágenes (III)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Visualizador secuencial.-

Bien, amigos. Vamos ahora a crear una variación del visualizador, de tal forma que en la página principal aparezca sólo un enlace. Cuando el usuario pincha sucesívamente en el mismo la imagen que se presenta en la ventana flotante va cambiando, recorriendo un ciclo sin fin (después de la última imagen empieza de nuevo por la primera).

El código necesario para las dos páginas es el siguiente:

Código de la página visualizador_secuencial.html:

<html>
<head>
<title>HTMLWeb - WebScript - Ventanas - Visualizador de imágenes</title>
    <script language="JavaScript" type="text/javascript">
      /**
      * declaramos la variable contador, que va a fijar qué imagen
      * se va a mostrar en la ventana flotante.
      * declaramos la variable longitus que va a fijar cuántas imágenes
      * diferentes vamos a mostrar.
      */
      var contador=0;
      var longitud=1;
      /**
      * declaramos la función que va a encargarse de abrir la ventana flotante
      * y aumentar el contador en cada click del usuario.
      * Si el contador supera el número de imágenes (definido por longitud),
      * se pone a cero y se vuelve a llamar a la función para recomenzar el ciclo
      */
      function abre()
      {
        if(contador<longitud)
        {
         window.open("marco_secuencial.html","marco","width=230,height=230,top=110,left=260");
          contador++;
        }
        else
        {
          contador=0;
          abre();
        }
      }
    </script>
</head>
<body bgcolor="#ffff99">
<a href="#" onclick="abre(); return false;">mis imágenes<br><br>
</body>
</html>

Código de la página marco_secuencial.html:

<html>
<head>
<title>HTMLWeb - WebScript - Ventanas - Visualizador de imágenes</title>
    <script language="JavaScript" type="text/javascript">
      /**
      * declaramos una matriz que va a contener las imágenes,
      * para precargarlas en caché.
      * declaramos cada elemento de la matriz como una nueva imagen
      * y le asignamos su ruta, para que el navegador pueda
      * cargarlas en la memoria caché.
      */
      var misImagenes=new Array();
      misImagenes[0]=new Image();
      misImagenes[0].src="images/imagen1.jpg";
      misImagenes[1]=new Image();
      misImagenes[1].src="images/imagen2.jpg";
      misImagenes[2]=new Image();
      misImagenes[2].src="images/imagen3.jpg";
      misImagenes[3]=new Image();
      misImagenes[3].src="images/imagen4.jpg";
      /**
      * declaramos la variable longitud para almacenar el número real
      * de imágenes que vamos a usar, y luego pasamos éste valor a
      * la variable del mismo nombre de la página principal.
      * Declaramos una variable contador que va a fijar la imagen
      * a mostrar, y le asignamos el valor de la variable de igual nombre
      * de la página principal, que es la que en realidad lleva el control.
      */
      var longitud=misImagenes.length;
      opener.longitud=longitud;
      var contador=opener.contador;
      /**
      * función que manda el foco al campo del formulario,
      * para hacer que la ventana flotante "se levante"
      */
      function enfoca()
      {
             document.forms[0].oculto.focus();
      }
    </script>
</head>
<body bgcolor="#ffff99" onload="enfoca()">
<br>
<div align="center">
    <script language="JavaScript">
        /**
      * escribimos la etiqueta completa de la imagen de forma
      * dinámica, cuando se está cargando la página.
      * Añadimos varios <br> para Nestcape Navigator,
      * para que no se vea el campo de texto en pantalla.
      */
        document.write("<img name=imagen src='images/imagen"+contador+".jpg'>")
        if(document.layers)
            document.write("<br><br><br><br><br><br><br><br><br><br><br>");
    </script>
</div>
<form>
    <input type="text" name="oculto" style="width:0px;height:0px">
</form>
</body>
</html>

Comentarios para la página principal:

Declaramos la variable contador para poder recorrer todas las imágenes disponibles. Esta variable se va incrementando una unidad cada vez que el usuario pincha el enlace de la página.
Declaramos la variable longitud para poder condicionar el recorrido de contador. Como no sabemos de antemano cuántas imágenes va a haber (éstas están declaradas en el código de la ventana flotante), le damos inicialmente el valor 1, para que se pueda mostrar la primera imagen.
En las función abre( ) lo primero que hacemos es comprobar el valor de contador, comparándolo con el de longitud. Si quedan imágenes que mostrar abrimos la ventana flotante y aumentamos el contador una unidad. Si ya hemos llegado al final del ciclo, igualamos el contador a 0 y volvemos a empezarlo, llamando a la función abre( ) desde ella misma.
En este caso el enlace no pasa ningún argumento a la función. No hace falta.

Comentarios para la ventana flotante:

Declaramos la variable longitud para almacenar cuántas imágenes tenemos disponibles, accediendo al valor de la propiedad length de la matriz misImagenes. Una vez hallado este valor, se lo pasamos a la variable de igual nombre de la página principal, para que en ésta se sepa qué longitud real va a tener el ciclo de imágenes.
Declaramos una variable contador , y la igualamos en el acto con la de igual nombre de la página principal, que es la que controla la imagen a mostrar cada vez que se llama a la ventana flotante.

Por lo demás el código es análogo al visto en el caso anterior. En ésta página tenéis el resultado.

Home - HTMLWebScript - Ventanas - Visualizador de imágenes - 1 - 2 - 3