tutorial de HTML

DHTML (Dynamic HTML, HTML dinámico) está basado en la idea de convertir las etiquetas HTML en objetos que pueden ser programados mediante JavaScript u otros lenguajes. de esta manera, la página puede ser modificada o tener cierta interacción con los visitantes.

Normalmente, podemos agregar una imagen con la etiqueta IMG, dimensionarla, alinearla y, por supuesto, establecer su fuente. Una vez que el navegador la cargue y la muestre, permanecerá en la pantalla sin alteraciones.

Con el DHTML podríamos conseguir que, ante ciertas acciones del usuario, la imagen cambie alguna de sus propiedades sin que tenga que recargarse la página.

Una de las técnicas más simples es cambiar el archivo de la imagen. Esta es una etiqueta normal:

<IMG SRC="URLimagen">

Para convertirla en un objeto al que se pueda hace referencia desde un lenguaje, basta añadirle el atributo ID y darle un nombre único:

<IMG SRC="URLimagen" ID="unnombre">

La imagen se cargará normalmente pero ahora, en cualquier parte del documento HTML podemos incluir rutinas JavaScript que la modifiquen. Para esto, usamos los llamados eventos, atributos comunes a casi todas las etiquetas y que ejecutan esos scripts cuando se produce determinada situación. Los más comunes son onmouseclick, onmouseover y onmouseout.

En forma genérica, sería algo así:

<IMG SRC="URLimagen" ID="unnombre"
     onmouseclick="rutinascript">

Las rutinas scripts son complejas pero hay algunas que podemos utilizar sin tener demasiado conocimiento.

El código del ejemplo es el siguiente:

<img src="imagen1" id="demo01"
     onmouseover="getElementById('demo01').src='imagen2';" />

Como se ve, hay dos distintos, uno para la imagen de la izquieda y otro para el de la derecha. El primero de ellos es el que usamos normalmente, el segundo es una variante a utilizar cuando el servidor en que nos encontramos no lo acepte. La forma general es:

getElementById('nombreID').propiedad='valor';

En ambos casos, la propiedad es src o sea la fuente de la imagen y el valor es la URL de la imagen.

Por supuesto, falta algo, cuando la imagen cambia, no podemos restaurarla, así que le agregamos el evento onmouseout e invertimos el preoceso:

Cuyo código sería:

<img src="imagen1" id="demo03"
    onmouseover="getElementById('demo03').src='imagen2';"
    onmouseout="getElementById('demo03').src='imagen1';" />

Aquí, el valor de ID del ejemplo es otro ya que debe ser un nombre único. Eso, que puede ser una desventaja es lo que nos permite no solo cambiar la apariencia de un elemento con un efecto rollover:

<P ID=”demo04″
    onMouseOver=”getElementById(’demo04′).style.color=’red’;”
    onMouseOut=”getElementById(’demo04′).style.color=’black’;”>
    [.... Texto del párrafo ...]
</P>

Donde getElementById(’demo04′).style.color es la propiedad color de la propiedad estilo del objeto en uso, en este caso P.

También podemos cambiar las propiedades de cualquier objeto de la página, siempre que lo hayamos identificado:

<P ID=”demo05″>
    [.... El párrafo que no tiene el efecto ...]
</P>
<P
    onMouseOver=”getElementById(’demo05′).style.color=’red’;”
    onMouseOut=”getElementById(’demo05′).style.color=’black’;”>
    [.... El párrafo con el efecto ...]
</P>

Lo podemos complicar un poco más, haciendo que ambos cambien:

<P id=”demo06″
    onmouseover=”getElementById(’demo06′).style.color = ‘red’;”
    onmouseout=”getElementById(’demo06′).style.color = ‘black’;”>
    [.... El primer párrafo ...]
</P>

<P id=”demo07″
    onmouseover=”getElementById(’demo07′).style.color = ‘blue’;
        getElementById(’demo06′).style.color = ‘blue’;”
    onmouseout=”getElementById(’demo07′).style.color = ‘black’;
        getElementById(’demo06′).style.color = ‘black’;”>
    [.... El segundo párrafo ...]
</P>

Casi cualquier propiedad puede ser cambiada, algunas como las que asignan el tamaño, harán que el espacio necesario para el elemento se re-dimensione.

En resumen, para cambiar el estilo de cualquier elemento de la página, se puede utilizar cualquier rutina interceptora de eventos, y establecer la nueva propiedad en forma directa dentro del mismo objeto mediante:

getElementById('identificador').style.propiedad = 'valor'

Hasta aquí llegamos, ya es el momento de salir a investigar. Ahora sí, es tiempo de navegar y mirar los códigos fuente de las páginas. Aprender de lo que otros han hecho. Eventualmente, surgirán preguntas y los errores serán inevitables. Sólo hay una solución, probar, probar, probar, una y otra vez.