HTMLpointHTMLpoint HTMLpoint.com


 Imágenes dinámicas al pasar el ratón 1/2



Una de las mayores limitaciones del HTML es el carácter estático de los documentos que se traduce en gran medida en páginas cuya única animación está gestionada mediante GIF animados o applet Java. Esta peculiaridad se refiere no sólo al aspecto gráfico, sino también y sobre todo a la estructura del documento que, una vez cargado por el navegador, no puede modificarse si no es a través de un refresh. A la segunda limitación pone remedio el HTML dinámico, el cual mediante un modelo a objeto a todos los efectos convierte en modificables los documentos incluso tras haberse cargado por completo. Javascript es distinto de Dynamic HTML pero, a menudo, un uso conjunto de ambos lenguajes produce buenos resultados. Los ejemplos Javascript de este mes explotan sintaxis DHTML y Javascript para gestionar dinámicamente imágenes cuando el ratón pasa por encima de los enlaces de un documento. Se trata, pues, de un uso conjunto de sintaxis que, en la práctica, se traduce en efectos crossbrowser (compatibles con Netscape y MsIe), rápidos de cargar y fáciles de configurar.

HTML permite asociar a las imágenes insertadas en el documenteo un texto de comentario. Un típico ejemplo es el siguiente:

<IMG SRC="foto.gif" ALT="Esta es una imagen de prueba">

En este caso, a la imagen "foto.gif" invocada en el documento, se le asocia el comentario comprendido en el campo ALT de la marca IMG. Este texto de comentario tiene diversas funciones:

  • describe una imagen que, de otra manera, podría tener un significado ambiguo;
  • aparece en caso de que la imagen no esté presente o el enlace está interrumpido;
  • los navegadores vocales lo leen, por lo que se facilita la navegación a los discapacitados.

    En HTML no existe un campo correspondiente para comentar simples enlaces textuales. En otras palabras, si a través del campo ALT es posible comentar enlaces conectados a imágenes, esto no es posible por lo que se refiere a enlaces asociados a texto. Este límite queda superado gracias a Javascript, que permite visualizar dinámicamente imágenes cuando el ratón pasa por encima de un área de enlace. En este caso, por tanto, no se trata de comentarios textuales sino de imagen.
    Antes de nada hay que crear las imágenes que los enlaces visualizarán cada vez. En el ejemplo de este artículo se crean tres imágenes en formato GIF (01.gif, 02.gif, 03.gif).
    Posteriormente, es necesario insertar la siguientes sintaxis Javascript entre los campos <HEAD></HEAD> del documento:
    Muestra el ejemplo práctico

    La personalización del script es bastante simple y hace falta sólo prestar atención a algunos pequeños detalles. Ante todo, hay que establecer la distancia de la imágenes al ratón. La incompatibilidad de los navegadores obliga a escribir el código específico para MsIe y Netscape. En particular, el código que distancia las imágenes de comentario del ratón para Netscape es el siguiente:

    En particular, x+25 establece la distancia, en píxel, en dirección horizontal. En este caso, por tanto, las imágenes se visualizan a 25 píxel a la derecha del cursor del ratón.
    Respecto al navegador Microsoft, sin embargo, el código que hay que modificar para la distancia es el siguiente:

    En este caso, como en el anterior, el valor que hay que modificar es x+25.

    Por lo demás, el código comprendido entre los campos debe quedar inalterado.

    Para que cuando pase el ratón los tres enlaces invoquen las imágenes, es necesario insertar una serie de referencias en ellos. En particular, a los enlaces se les agregarán las siguientes líneas de código:
    Esto indica que cuando pase el ratón (gracias al gestor de eventos onMouseOver), se invocará la función "openbox" y la relativa imagen "01.gif", mientras que cuando éste salga del área de enlace (gracias a onMouseOut), se invocará la función "closebox" que esconde imágenes.

    Por último, es necesario invocar la función "popupbox", a falta de la cual las imágenes no se visualizan:

    <div id="popupbox" style="position:absolute"></div>


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