HTMLpointHTMLpoint HTMLpoint.com


 Botones animados ... 2/2

  semana 33 - 20 septiembre 1999

esempio.htm

Antes de continuar, es conveniente hacer algunas aclaraciones sobre las modalidades de estructuración de las carpetas. Los file "esempio.htm" y "animate.js" se insertan en la raíz principal del ejemplo, tras lo cual es necesario crear una carpeta "/immagini" y, dentro de la misma, dos carpetas: "/primo" y "/secondo". La carpeta "/primo" contiene las 6 imágenes para el primer botón (rojo), mientras que "/secondo" contiene las imágenes para el segundo (verde).

Dentro del file "esempio.htm" se inserta parte del código Javascript necesario para el funcionamiento el ejemplo, además de las imágenes propiamente dichas con su correspondiente enlace.

Antes de nada, hay que invocar el file externo "animate.js" antes creado. Para ello, el código:

<SCRIPT LANGUAGE=JavaScript SRC="animate.js"></SCRIPT>

debe insertarse entre las marcas <HEAD> del documento.

El código Javascript sucesivo se inserta *después* del campo <BODY> y *no* en el campo <HEAD>:


this.numButtons = 2;
indica el número total de botones animados (en nuestro ejemplo, dos)

this[0]=new AnimatedImage("primo", 6, ".gif");

Código relativo al primer botón, donde "primo" es el nombre asignado a la función, 6 es el número de las imágenes en secuencia y ".gif" es la extensión de los file.
Así, si la animación se compone de más imágenes, hay que modificar el valor "6", mientras que si se elige otro formato gráfico, hay que sustituir con él ".gif" (p. ej. ".jpg").

this[1]=new AnimatedImage("secondo", 6, ".gif");
Este código tiene la misma utilidad que el primero, pero define el funcionamiento del segundo botón.

Una vez impostado el código script e invocado el file externo no hay más que añadir en el documento las imágenes y los enlaces correspondientes:


La imagen se insertará con el normal procedimiento HTML (nombre, altura, anchura, borde, comentario) exceto por lo que se refiere a la presencia de NAME="primo" (o NAME="secondo" para la otra imagen).

Los gestores de eventos onMouseOver y onMouseOut invocan, respectivamente, las funciones "turn_on" y "turn_off". De este modo, cuando el ratón está fuera del área de imagen (onMouseOut), el efecto del script no se produce, mientras que sí se produce cuando el ratón pasa por encima del área de imagen (onMouseOver).

La imagen visualizada por defecto (cuando el ratón no la toca) se inserta en este punto. En nuestro ejemplo, las imágenes por defecto son "immagini/primo/0.gif" e "immagini/secondo/0.gif".

Para que este script funcione correctamente, no alteréis la estructura actual de las carpetas o, en cualquier caso, hacedlo respetando las indicaciones facilitadas en este explicación.


  Vuelve a principio de página