NOTA: Capítulo en fase de preparación

26. HTML dinámico

El HTML dinámico, también conocido por las siglas DHTML (Dynamic HTML) supone una verdadera revolución sobre cómo podemos crear las páginas del Web.

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 JavaScript u otros lenguajes.

Esto supone un gran adelanto. Hasta ahora, el navegador del usuario ejecutaba las etiquetas del HTML una sola vez, en el momento de recibirlas desde el servidor. Su función era única e inmutable: la prevista por las reglas del HTML para esa etiqueta concreta.

Veamos un ejemplo. Si queremos colocar una imagen determinada en una página Web, debemos escribir en el documento HTML la etiqueta <IMG SRC ...> que define cuál es el fichero de imagen, qué atributos va a tener (dimensiones, leyenda, alineamiento, etc.), según se ha visto en los capítulos correspondientes.

El navegador del usuario, al recibir el documento HTML desde el servidor, va interpretando las distintas etiquetas y va formateando la página de acuerdo a ellas. Al llegar a la etiqueta de imagen, la colocará en la página Web en una posición determinada y con los atributos indicados por la propia etiqueta.

Una vez que la imagen esté visible en la pantalla, ya no habrá nada que la haga cambiar... excepto el HTML dinámico. De la manera que se verá más adelante, se pueden conseguir muchas cosas hasta ahora impensables: que al pasar el cursor del ratón por encima de la imagen, o al pulsarla, cambien los atributos de la imagen por otros distintos, o incluso por otra imagen diferente, etc.

Con el DHTML se pueden conseguir otras muchas cosas: texto que cambia de posición, de color o de fuente. Enlaces que cambian de destino, etc.

Pero 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.

Navegadores que utilizan el DHTML

Por desgracia, hay un inconveniente: la implementación de esta técnica por parte de los dos navegadores más importantes, (Netscape, desde su versión 4.0 y Explorer, también desde su versión 4.0), no es la misma.

Se va a ver en este capítulo exclusivamente la técnica que utiliza el Explorer, debido a que Netscape no ha adoptado, al contrario que Microsoft, la norma llamada DOM (Document Object Model) propuesta por el W3C (el comité oficial que regula las normas del HTML)

Esto tiene como consecuencia que con la técnica del Netscape 4.0 sólo se pueden cambiar las propiedades del objeto mientras se está cargando la página, y no después, lo que arruina casi todo el potencial y las ventajas del DHTML.

Por otra parte, la ventaja del método del Explorer no es sólo la indicada, sino que además es más sencilla de utilizar. Por estos dos motivos, se va ver la técnica utilizada por el Explorer, y no la del Netscape.

Es posible que Netscape adopte la norma DOM en versiones posteriores, pero de momento, todo lo que se va a ver a continuación sólo podrá ser apreciado con el Explorer 4.0

Aplicación del DHTML a las imágenes

Una de las cosas más llamativas que se pueden hacer con el DHTML es cambiar el fichero de imagen asociado a una etiqueta de imagen.

Como se vió en el capítulo 4, la etiqueta convencional del HTML para colocar una imagen en una página es de este tipo:

 

<IMG SRC="imagen1.gif">

El atributo SRC hace referencia al fichero que contiene la imagen que se quiere mostrar en la pantalla (en este caso imagen1.gif). El resultado es la imagen que se ve a la derecha.

Para convertir esta etiqueta en un objeto al que se pueda hace referencia desde un lenguaje de programación, basta con añadirle el atributo ID, de la siguiente manera:

 

<IMG ID="MiPerro" SRC="imagen1.jpg">

Ahora la etiqueta ya es un objeto programable, cuyo nombre es MiPerro (o el nombre que se le haya querido dar; no hay ninguna regla para ello, puede ser cualquier palabra, como MiPerro, o miperro, o perro, etc.)

Cuando se carga la página, la imagen que se ve en primer lugar es la señalada en la etiqueta (en este caso imagen1.jpg), al igual que en la etiqueta convencional.

Pero si en alguna parte del documento HTML hemos incluido una rutina en JavaScript (o en VBScript) que haga uso del siguiente comando:

 

MiPerro.src="imagen2.jpg"

provocará que, al ejecutarse dicha rutina, la imagen que aparezca ya no será imagen1.jpg, sino imagen2.jpg.

Para comprenderlo mejor, veamos algunos ejemplos:

Cambio de imágenes por medio del cursor del ratón

En el capítulo 21 (Trucos diversos), en la sección Texto fijo de un enlace en la barra de estado, se vió cómo conseguir que al pasar el cursor por encima de un enlace (o al abandonarlo) apareciera un texto fijo en la barra de estado. Esto se conseguía introduciendo dentro de la etiqueta del enlace los comandos de JavaScript onMouseOver y onMouseOut.

Nos vamos a valer de estos mismos comandos, y de otro más: onMouseClick, para cambiar dinámicamente la imagen por la acción del cursor del ratón.

Cambio al pasar por encima el cursor del ratón

Hay que introducir en la etiqueta de la imagen el siguiente comando:

onMouseOver="MiPerro.src='imagen2.jpg';"

con lo que la etiqueta completa quedaría así:

<IMG ID="MiPerro" SRC="imagen1.jpg" onMouseOver="MiPerro.src='imagen2.jpg';">

Como se puede apreciar en la imagen de la derecha, inicialmente es la misma imagen (imagen1.jpg) que en la etiqueta convencional, pero al pasar el cursor del ratón por encima de ella, cambia por otra imagen distinta (imagen2.jpg)

Se ha hecho que ambas imágenes tengan las mismas dimensiones por motivos estéticos, pero pueden ser de tamaños completamente distintos.
 

 

 

 

Continuará...