El lector puede copiar el Código fuente 3 fuente a una página cualquiera y comprobar su funcionamiento, como aparece en la Figura 3 En el caso de disponer de una serie de ítem a los que queremos aplicar un comportamiento común, podemos usar ésta técnica junto a la capacidad de promoción de eventos, para programar con un único código ese comportamiento múltiple.
<html>
<head>
<style>
.Normal {
cursor: hand;
font-family: verdana;
font-size: 20;
font-style: normal;
background-color: blue;
color: white;
display: block
}
.Resaltado {
cursor: hand;
font-family: verdana;
font-size: 20;
font-style: italic;
background-color: white;
color: blue;
display: block
}
</style>
</head>
<body>
<P style="FONT-FAMILY:Arial;font-size:21">Seleccione un Bicho</P><HR>
<span class=Normal>Lagarto Juancho</span><br>
<span class=Normal>Leoncio el León</span><br>
<span class=Normal>Pepe Pótamos</span><br>
<span class=Normal>Gorila Magilla</span><br>
<span class=Normal>Gato Silvestre</span><br>
<script>
// Asignamos comportamiento por defecto al objeto document
//lo que se aplica a cada uno de sus nodos hijos.
document.onmouseover = MostrarEspecial;
document.onmouseout = MostrarNormal;
function MostrarEspecial() {
//si el estilo es Normal, cambiar a Resaltado
if (window.event.srcElement.className == "Normal") {
window.event.srcElement.className = "Resaltado";
}
}
function MostrarNormal() {
//si el estilo es Resaltado, cambiar a Normal
if (window.event.srcElement.className == "Resaltado") {
window.event.srcElement.className = "Normal";
}
}
</script>
</body>
</html>
Código fuente 4
No hay comentarios:
Publicar un comentario