El evento mouseover se dispara cuando ingresamos con la flecha del
mouse a un control HTML que tiene registrado dicho evento, y mouseout se
dispara cuando sacamos la flecha del mouse del control.
Es muy común utilizar estos dos eventos para producir cambios en el
elemento HTML cuando ingresamos la flecha del mouse y retornar al estado
anterior cuando se saca la flecha del mouse.
Es importante hacer notar que estos eventos se disparan sin tener que
presionar la flecha del mouse, solo con desplazarla al interior del
elemento HTML se dispara el evento mouseover.
Implementaremos un pequeño ejemplo que muestre un cuadrado, el mismo
mostrará los bordes redondeados cuando ingresemos la flecha del mouse en
su interior y volverá al estado anterior cuando retiremos la flecha.
<html>
<head>
<script type="text/javascript">
addEventListener('load',inicio,false);
function inicio()
{
document.getElementById('recuadro1').addEventListener('mouseover',entrada,false);
document.getElementById('recuadro1').addEventListener('mouseout',salida,false);
}
function entrada()
{
document.getElementById('recuadro1').style.borderRadius='30px';
}
function salida()
{
document.getElementById('recuadro1').style.borderRadius='0px';
}
</script>
</head>
<body>
<div style="width:200px;height:200px;background:#0000ff" id="recuadro1">
</div>
</body>
</html>
Definimos en el HTML un div de color azul de 200 píxeles de lado:
<div style="width:200px;height:200px;background:#0000ff" id="recuadro1"> </div>
En la función inicio registramos los eventos mouseover y mouseout:
function inicio()
{
document.getElementById('recuadro1').addEventListener('mouseover',entrada,false);
document.getElementById('recuadro1').addEventListener('mouseout',salida,false);
}
El método entrada se ejecuta cuando ingresemos la flecha del mouse en
el div llamado recuadro1 y procedemos en el mismo a modificar la
propiedad borderRadius del estilo de este elemento (indicamos que el
redondeo de los vértices del div sea de 30 píxeles):
function entrada()
{
document.getElementById('recuadro1').style.borderRadius='30px';
}
Cuando sale la flecha del mouse del div se ejecuta la función salida donde fijamos con 0 la propiedad borderRadius:
function salida()
{
document.getElementById('recuadro1').style.borderRadius='0px';
}
No hay comentarios.:
Publicar un comentario