HTMLpointHTMLpoint HTMLpoint.com


 Alternate Text  

 por Massimiliano Valente

Por "texto alternativo" entendemos el comentario escrito que se añade a las imágenes insertadas en un documento HTML y que aparece cuando el ratón pasa por encima de ellas. Las especificaciones de HTML 4.0 imponen que dicho comentario esté incluido en todas las imágenes, a fin de facilitar la navegación a los navegadores textuales. Por defecto, el texto alternativo está escrito en caracteres negros sobre fondo amarillo. HTML dinámico permite hacer que el texto alternativo se desplace, así como personalizar diversos elementos: tipo de carácter, color, fondo y tamaño. Este tipo de efecto se puede obtener en enlaces textuales o de imagen, es decir, permite insertar un comentario que se desplaza en uno o más enlaces y no sólo en las imágenes, lo que con el HTML clásico no era posible.

El file "alt.js" imposta las funciones "showtip2", "hidetip2" y "scrolltip" de manera diferente para MSIE y 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 HTML normales. Así, en nuestro 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), así como que el texto debe ser de color negro y estar dentro de una ventana con bordes de 1 píxel.

"ScrollLeft+10" establece que la ventana que contiene el comentario aparece a 10 píxel a la derecha del cursor del ratón.

"ScrollTop+10" indica, sin embargo, la distancia en píxel hacia abajo de la ventana de mensaje.

En ambos casos si el signo positivo se sustituye con el negativo, se entiende que la distancia cambia de dirección: es 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 que con Netscape no produce ningún efecto. Para que éste se produzca, es necesario hacer referencia al código siguiente:

Muestra el ejemplo práctico


También en este caso vale cuanto hemos dicho anteriormente para los valores:

document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10


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

Una vez impostado el contenido del file externo "alt.js", debemos actuar en el documento en el que pretendemos producir el efecto dinámico.

Dentro de las marcas <HEAD> hay que insertar la referencia al file externo:

<script src="alt.js"></script>

El código se inserta en dos fases dentro del documento, en el espacio comprendido entre las marcas <BODY>:

Muestra el ejemplo práctico


"clip:rect (0 150 50 0)" establece las dimensiones en píxel de la ventana dentro de la cual se desplaza el texto de este ejemplo.

"background-color:red" el color de fondo de la ventana, pero sólo para MSIE.

El resto se refiere al tamaño, tipo y color (sólo para MSIE) del carácter.

El color de fondo de la ventana para Netscape se imposta mediante el código:

<layer name="nstip" width=1000px bgColor="red"></layer>

Por último, introducimos dentro del enlace el evento onMouseover, el cual, cuando el ratón pasa por encima del enlace, activa la función "showtip2", y el evento onMouseout, que, cuando sale el ratón, activa la función "hidetip2":

Muestra el ejemplo práctico


Los efectos que en esta demo se producen en un solo enlace pueden producirse sin problemas en todos los enlaces del documento. El file externo, invocado oportunamente, permite utilizar este efecto en todo el sitio sin tener que repetir cada vez la sintaxis.


  Vuelve a principio de página