HTMLpointHTMLpoint HTMLpoint.com


 Texto dinámico de comentario 1/2

  semana 52 - 31 enero 2000

Por "texto alternativo" se entiende el comentario que se adjunta a las imágenes incuidad en un documento HTML y que se visualiza cuando el ratón pasa por encima de ellas. Las especificaciones de HTML 4.0 imponen la inclusicón de dicho comentario en todas y cada una de las imágines, a fin de facilitar la navegación a los navegadores vocales. Por defecto, el texto alternativo se visualiza con caracteres negros sobre fondo amarillo. HTML dinámico permite el desplazamiento del texto alternativo y la personalización de distintos elementos: tipo de carácter, color, fondo y dimensiones. Este tipo de efecto se produce en enlaces de texto o de imagen. Dicho de otro modo, a diferencia de HTML clásico, permite insertar un comentario a uno o más enlaces y no tan sólo a imágenes. Otro rasgo positivo es la posibilidad de añadir un efecto dinámico de desplazamiento de los comentarios, para el que te remitimos al ejemplo práctico.

El ejemplo consta de 2 file:
  • esempio.htm [el documento en el que se produce el efecto]
  • alt.js [el file externo que contiene buena parte del código]
Para comprender más fácilmente el presente script, haz siempre referencia a los file antedichos, verificando los procedimientos y datos expresados. Sólo de esta manera, con una comparación continua, podrás entender las peculiaridades de este Javascript.

alt.js

El file "alt.js" imposta las funciones "showtip2", "hidetip2" y "scrolltip" de manera diferente para MSIE y para Netscape.


Este código se refiere al funcionamiento de la demo con Internet Explorer. La propiedad "innerHTML" define el contenido de un elemento usando las marcas normales HTML. Así, en nuesto ejemplo a "innerHTML" sigue el código:

<marquee style="border:1px solid black">'+text+'</marquee>

que define el movimiento del texto de derecha a izquierda gracias a Marquee (marca propiedad de MSIE), y que éste debe ser de color negro y estar dentro de una ventana con borde igual a 1 píxel.

"ScrollLeft+10" establece que la ventana que contiene el comentario se visualizará a una distancia de 10 píxel a la derecha del cursor del ratón.

"ScrollTop+10" indica, por su parte, la distancia en píxel hacia abajo de la ventana de mensaje.

En ambos casos, si sustituimos el signo positivo con el negativo, se entenderá que la distancia es, respectivametne, hacia la izquierda en el primer caso, y hacia arriba en el segundo.

La función "ShowTip2" así impostada funciona sólo con MsIE, mientras no produce ningún efecto con Netscape. Para que esto suceda, es necesario hacer referencia al código sucesivo:


También en este caso vale cuanto dijimos antes respecto a los valores:


que se refieren a la distancia en píxel del cursor del ratón hacia la derecha (pageX+10) y hacia abajo (pageY+10).


  Vuelve a principio de página