El evento onmouse se usa para definir la operación usando el mouse.
Los eventos onmouse en JavaScript son:
- onmouseover y onmouseout
- onmouseup y onmousedown
- onmouseenter y onmouseleave
onmouseover y onmouseout:
Los eventos onmouseover y onmouseout ocurren cuando el cursor del mouse se coloca sobre un elemento específico
Estos eventos no requieren un clic del mouse para suceder
javascript
<html>
<head>
<script type="text/javascript">
function over()
{
document.getElementById('key').innerHTML=
"Onmouseover event has occurred";
}
function out()
{
document.getElementById('key').innerHTML=
"Onmouseout event has occurred";
}
</script>
</head>
<body bgcolor="cyan">
<h2 id="key" onmouseover="over()"
onmouseout="out()">
Original Text</h2>
</body>
</html>
- Producción:
Al cargar la página web:
Después de colocar el mouse en el elemento:
Después de quitar el mouse del elemento:
onmouseup y onmousedown:
Estos eventos ocurren cuando se encuentra un clic del mouse
javascript
<html>
<head>
<script type="text/javascript">
function up()
{
document.getElementById("img").src="up.png";
}
function down()
{
document.getElementById("img").src = "down.png";
}
</script>
</head>
<body bgcolor='yellow'>
<img id="img" src="img.png"
onmouseup="up()"
onmousedown="down()"
width=500px>
</body>
</html>
- Producción:
Al cargar la página web:
Ocurrencia del evento onmousedown:
Ocurrencia del evento onmouseup:
onmouseenter y onmouseleave
El evento onmouseenter ocurre cuando el mouse se coloca sobre el elemento y permanece hasta que se quita el mouse del elemento.
El evento onmouseleave ocurre tan pronto como se quita el mouse del elemento
Estos eventos no requieren un clic del mouse para suceder
javascript
<html>
<head>
<script type="text/javascript">
function enter()
{
document.getElementById(
"img").src="enter.png";
}
function leave()
{
document.getElementById(
"img").src = "leave.png";
}
</script>
</head>
<body bgcolor='yellow'>
<img id="img" src="img.png"
onmouseenter="enter()"
onmouseleave="leave()"
width=500px>
</body>
</html>
- Producción:
Al cargar la página web:
Ocurrencia del evento onmouseenter:
Ocurrencia del evento onmouseleave:
Publicación traducida automáticamente
Artículo escrito por Chakradhar_Chinni y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA