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 (II)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Visualizador aleatorio.-

Vamos a ver el código necesario pués para obtener nuestro visualizador aleatorio (en el que el usuario puede elegir qué imagen se va a mostrar en la ventana flotante).

Vamos a tener pués dos páginas html, una, llamada visualizador, que va a ser la principal, desde la que vamos a abrir la flotante y en la que vamos a establecer las variables de control de carga de las imágenes, y otra la ventana flotante en sí, que vamos a llamar marco, que es en la que se van a mostrar las imágenes.

Como siempre, primero vemos el código, y luego lo comentamos.

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

<html>
<head>
<title>HTMLWeb - WebScript - Ventanas - Visualizador de imágenes aleatorio</title>
    <script language="JavaScript" type="text/javascript">
        /**
        * funcion principal de apertura de la ventana flotante
        */
        function abre(num)
        {
            /**
            * abrimos la ventana flotante
            */
           window.open("marco_aleatorio.html","marco","width=230,height=230,top=110,left=260");
            /**
            * recogemos el valor "num" pasado por el enlace, que define la imagen a mostrar,
            * y lo asignamos como valor del campo oculto del formulario
            */
            document.forms[0].caja.value=num;
        }
    </script>
</head>
<body bgcolor="#ffff99">
<a href="#" onclick="abre('1'); return false;">foto1</a><br><br>
<a href="#" onclick="abre('2'); return false;">foto2</a><br><br>
<a href="#" onclick="abre('3'); return false;">foto3</a><br><br>
<a href="#" onclick="abre('4'); return false;">foto4</a><br><br>
<form name="oculto">
    <input type="hidden" name="caja">
</form>
</body>
</html>

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

<html>
<head>
<title>HTMLWeb - 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";

      /**
      * funcion que asigna como ruta de la imagen la contenida en el campo oculto del formulario de la ventana padre,
      * y que manda el foco al campo del formulario oculto de este pagina, para hacer que la ventana flotante "se levante"
      */
      function enfoca()
      {
          eval("document.images[0].src='images/imagen"+window.opener.document.forms[0].caja.value+".jpg'");
          document.forms[0].oculto.focus();
      }
    </script>
</head>
<body bgcolor="#ffff99" onload="enfoca()">
<br>
<div align="center">
    <img name="imagen" src="images/imagen1.jpg">
</div>
<script language="JavaScript" type="text/javascript">
    /**
    * pintamos todos estos <br> para que en Nestcape 4x no se vea el campo oculto
    */
    if(document.layers)
        document.write("<br><br><br><br><br><br>");
</script>
<form>
    <input type="text" name="oculto" style="width:0px;height:0px">
</form>
</body>
</html>

Comentarios para la página principal:

Implementamos la función abre(num), que recibe como parámetro la cadena num, que va a identificar cuál imagen se debe abrir en la ventana flotante. Las imágenes usadas se llaman imagen1, imagen2, imagen3 e imagen4.
Abrimos la ventana flotante mediante el método open del objeto window, le damos un nombre identificador (marco) y le asignamos unas dimensiones y posición en pantalla.
En cada enlace pasamos a la función el número identificador de la imagen a abrir, que es recogida en la función abre(num) y es asignada dinámicamente como valor del campo "oculto" del formulario..

Comentarios para la ventana flotante:

Declaramos la matriz misImagenes para precargar las imágenes a usar en la memoria caché del navegador, con lo que la posterior presentación en pantalla va a ser rápida.
Establecemos una imagen genérica en la ventana, para cambiarle luego la ruta mediante la propiedad src del objeto Image, obteniendo un código JavaScript compatible con todos los navegadores.
Hemos establecido un formulario en la página, con una caja de texto, ya que la única forma de hacer que la ventana flotante se levante de nuevo es que alguno de sus elementos reciba el foco. Esto lo hacemos con la función enfoca( ), que primero asigna a la imagen la ruta contenida en el campo oculto de formulario de la ventana madre, y luego manda el foco a la caja de texto cuando se ha acabado de cargar la página (usamos para ello el evento onload del body).
Como no nos interesa que se vea la caja de texto, en Internet Explorer le asignamos una anchura 0 y una altura 0, usando una declaración de estilos en línea mediante la etiqueta style. Como ésto no funciona en Nestcape 4x, trás escribir la imagen en el body, y si es ése el navegador usado por nuestro visitante, escribimos varias etiquetas <br>, para que la caja de texto se sitúe muy por debajo de la imagen, con lo que no se verá.

Y ésto es todo lo que necesitamos para nuestro visualizador. En ésta página tenéis el resultado.

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