HTMLpointHTMLpoint HTMLpoint.com


 Texto enteractivo con DHTML 2/2

 por Massimiliano Valente

Sólo MS Internet Explorer 4 enterpreta correctamente la propiedad "CSS cursor" y permite impostar diversos tipos de cursor.

El ejemplo citado es muy simple desde un punto de vista estructural, pero es posible hacerlo más complejo añadiendo enlaces con soporte de listas o imágenes.

Los estilos dinámicos permiten animar el texto de un documento HTML gracias a las posibilidades de las hojas de estilo y las potencialidades de DHTML.

El siguiente ejemplo muestra cómo modificar dinámicamente el color del texto cuando colocamos sobre él el cursor del ratón:


Muestra el ejemplo práctico


El valor del atributo CLASS, cuando el ratón pasa por el elemento H1, es, en el primer caso "blue" y, en el segundo caso, "red". Así, se adopatará el color rojo especificado para "red" y el color azul especificado para "blue".

Otro ejemplo en el que se hace uso de script y hojas de estilo globales es el que permite un color de fondo dinámico a una determinada parte del texto:


Muestra el ejemplo práctico


El código contenido entre <STYLE></STYLE> determina el color y tamaño del texto. Este último se define con base en "puntos" (pt), cada uno de los cuales representa 1/72 de pulgada. Los puntos se refieren exclusivamente al espacio vertical ocupado en pantalla, mientras que la anchura aumentará proporcionalmente al aumento de la medida vertical.

El color del texto puede definirse con un identificador o con una lista de componentes RGB. El primer modo es simple e intuitivo, dado que es posible referirse al nombre inglés de los colores: red, blue, gray, green etc.

El formato RGB usa, para definir los colores, tres números enteros comprendidos entre 0 y 255, mediante una escala de valores lineal. El rojo, pues, será 255,0,0 y los matices cromáticos se realizarán mediante las combinaciones de valores.

En HTML los valores numéricos de los colores se definen según el denominado "trío hexadecimal", o sea, según un conjunto de tres números y dos cifras hexadecimales.

En el breve ejemplo que figura a continuación, una misma hoja de estilo utiliza los dos métodos antes citados para definir el color rojo del texto:


El evento OnMouseOver se verifica cuando el ratón pasa por encima del elemento indecado, y va acompañado por el evento OnMouseOut, el cual se verifica, por el contrario, cuando alejamos el ratón del elemento.

Dichos eventos exponen los mismos parámetros de OnMouseDown y OnMouseUp.

El concepto de evento (como notificación que se produce a raíz de una acción del usuario) es fundamental en DHTML, que justo gracias a esto expone un grupo tal de eventos que permite en la página la interacción entre usuario y documento.

Ésta es una de las peculiaridades del modelo de objetos del HTML dinámico.


  Vuelve a principio de página