HTMLpointHTMLpoint HTMLpoint.com


 Imágenes cuando pasa el ratón 2/2



El segundo ejemplo de este artículo es una variante del primero y responde, desde un punto de vista conceptual, a las mismas exigencias. En este caso, sin embargo, las imágenes tienen un área figa de exposición ocupada constantemente.
Para realizar el efecto, es necesario crear 4 imágenes:

01.gif (invocada cuando el ratón pasa por encima del primer enlace)
02.gif (invocada cuando el ratón pasa por encima del segundo enlace)
03.gif (invocada cuando el ratón pasa por encima del tercer enlace)
04.gif (visualizada por defecto al abrirse la página)

Las imágenes tienen que tener las mismas dimensiones, tanto a lo ancho como a lo alto. El formato gráfico, sin embargo, puede variar. En nuestro ejemplo se han creado imágenes de un tamaño de 150x110 píxel.

La sintaxis del ejemplo se debe insertar, en parte, entre las marcas <HEAD> y, en parte, en el cuerpo del documento. En el encabezamiento del documento hay que insertar la siguiente sintaxis:

Muestra el ejemplo práctico

El código imposta dos funciones: buffer e Showimage.
Las imágenes del ejemplos quedan recogidas en la última parte del código. Para que el script funcione, es importante el nombre "SHOWPAD" asignado a las imágenes.

Dentro del documento, hay que insertar, antes de nada, el código que invoca la imagen por defecto, es decir, la imagen que se visualizará al abrirse la página:
Así pues, la imagen "04.gif" es la que se visualiza al abrirse la página. Tiene un tamaño de 150x110 píxel, necesariamente igual al de las restantes imágenes. Si las imágenes tuvieran dimensiones distintas, quedarían deformadas.
El punto en que se coloca la imagen por defecto es también donde se visualizarán las imágenes sucesivas.

Una vez impostada la imagen por defecto, es necesario crear los enlaces a los cuales está asociada cada una de las otras imágenes.
A cada enlace se asociará un gestor de eventos onMouseOver, que invoca la función ShowImage y la imagen corrispondiente.

El primer enlace, en particular, no es más que una invocación de la imagen por defecto vista antes.

El gestor de eventos onMouseOver prevé que se invoque la función "ShowImage" cuando el ratón pase por encima del enlace. onMouseOver puede sustituirse con otro gestor de eventos: onmouseout.

onmouseout se activa cuando el ratón abandona el área de enlace. Tiene un funcionamiento opuesto a onmouseover, ya que lo importante no es que el cursor entre en área de enlace, sino que salga de ella. Sólo en ese momento, en efecto, el gestor de eventos se activará.


  Vuelve a principio de página
1997-2000 - Grafica, layout e guide sono de esclusiva proprietà de HTMLpoint s.r.l.