Una de las transformaciones más importantes que DOM realiza es la de asignar a cada etiqueta dinámica un atributo por cada evento al que es capaz de responder. Para programar una acción, basta con asignar como valor del atributo el nombre de una función escrita en uno de los lenguajes de script válidos, o invocar un método o propiedad de los objetos disponibles en el modelo DOM.
Podemos ver este comportamiento codificando otro efecto muy conocido actualmente, consistente en el cambio dinámico de estilos cuando el cursor pasa por encima de algún elemento.
Se puede utilizar la propiedad srcElement, teniendo en cuenta que se trata de un objeto que hace
referencia al elemento que se haya seleccionado, y la característica que hace que cualquier elemento
DHTML disponga de una propiedad (style), para modificar los valores que determinan su presentación.
Eso significa que todo lo que tenemos que hacer es asignar a los atributos onmouseover (pasar el ratón por encima de un área) y onmouseout (abandonar el área) la ejecución del código correspondiente (nótese que no estamos invocando a ninguna función incluida en etiquetas de script, sino que asignamos el código a ejecutar directamente a los atributos del elemento).
Imaginemos que nuestra página dispone de una par de elementos <P> con un cierto contenido y que queremos que cuando el usuario pase el cursor por encima de un de ellos, cambie automáticamente su estilo a color rojo y tamaño de letra de 20 píxeles. También queremos que cuando el cursor salga de la zona correspondiente al elemento, éste vuelva a su estado original.
<P style=”font-family:Arial; font-size=14”
onmouseover="window.event.srcElement.style.color='Red'"
onmouseout="window.event.srcElement.style.color = 'Black'">
Primer ítem que cambiará de estilo</P>
<P style=”font-family:Arial; font-size=14”
onmouseover="window.event.srcElement.style.color='Red'"
onmouseout="window.event.srcElement.style.color = 'Black'">
Segundo ítem que cambiará de estilo</P>
Código fuente 3
No hay comentarios:
Publicar un comentario