A medida que vamos avanzando en la confección de páginas web nos vamos fijando nuevos objetivos para crear cada día webs más atractivas.

Con el HTML dinámico, también conocido por las siglas DHTML (Dynamic HTML) podemos colocar cierta animación en nuestras páginas aprovechando que en los navegadores modernos cualquier página responde a las actividades que realiza el usuario (mover el ratón, hacer clic, pulsar una tecla, etc.). Estas actividades se denominan eventos.

Para referirnos a un evento en HTML lo hacemos por con el prefijo on seguido de su nombre; así, pasar el ratón por encima provoca el evento MouseOver por lo que escribiríamos onMouseOver, y que deje de estar encima con onMouseOut.

Para hacer referencia a un elemento en particular necesitamos identificarlo con el atributo ID que asigna un nombre a un elemento. Este nombre debe de ser único en un documento.

Vamos a explicar el mecanismo con dos ejemplos de un enlace que cambia de imagen dependiendo de que se apunte con el ratón o no, y un enlace de texto que cambia de fuente.

La etiqueta IMG tiene el atributo SRC que hace referencia al fichero que contiene la imagen que se quiere mostrar en la pantalla. Para referirnos a una de estas etiquetas, basta con añadirle el atributo ID, para darle nombre, de la siguiente manera:

<IMG SRC="irArriba.gif" ID="princ">

Cuando se carga la página, lo que se ve en primer lugar es la señalado en la etiqueta (en este caso irArriba.gif o la fuente verdana), al igual que en la etiqueta convencional, pero al incluir las instrucciones de manejo de evento provocará que al producirse el mismo, la imagen o la fuente cambie.

<a href="#"><img src="irArriba.gif" border=0 ID="princ"

onMouseOver="Princ.src='irAr_p.gif';"

onMouseOut="Princ.src='irArriba.gif';">

</a>

<a href="#"><font face="verdana" id="cletra"

onMouseOver="cletra.face='arial';"

onMouseOut="cletra.face='verdana';">

La letra cambia de tipografía</font>

</a>

Naturalmente podemos aprovechar la tecnología de CSS identificando un estilo por nombre (tendríamos dos estilos diferentes en este caso menuout y menuin).

<a href="#" id="menuout"

onMouseOver="id='menuin';"

onMouseOut="id='menuout';">

Elemento de menú</a>

Con el DHTML se pueden conseguir muchas cosas: texto que cambia de posición, de color o de fuente. Enlaces que cambian de destino, etc. y lo mejor de todo es que estos cambios se producen sin que se tenga que volver a cargar la página desde el servidor, ni tampoco que el servidor deba estar configurado de ninguna manera especial para permitir esto.

Está basado en una idea de lo más simple: convertir las etiquetas tradicionales del HTML en objetos programables, lo que nos permite poder luego manipularlas a nuestro gusto con otros lenguajes

Estos lenguajes son básicamente el JavaScript y el VBScript. Los eventos han de ser admitidos por el objeto y soportados por el navegador (de ahí que para nuestros ejemplos utilizáramos enlaces por donde pasar el ratón que cumple ambos requisitos).

Existen en el web numerosas colecciones de ejemplos de scripts (programitas) listos para usar, que mediante un simple copia/pega permiten insertar en nuestras páginas los efectos más comunes, aún no teniendo conocimiento técnico del lenguaje usado.