12 - Eventos mouseover y mouseout.


Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>casilla1,1</td><td> casilla 1,2</td>
</tr>
<tr>
<td>casilla 2,1</td><td>casilla 2,2</td>
</tr>
</table>
</body>
</html>
var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
  var x;
  x=$("td");
  x.mouseover(entraMouse);
  x.mouseout(salirMouse);
}


function entraMouse()
{
  $(this).css("background-color","#ff0");
}

function salirMouse()
{
  $(this).css("background-color","#fff");
}

Crear una tabla con dos filas y dos columnas, cambiar el color del interior de la casilla cuando ingresamos con el mouse y dejarla con dicho color cuando retiramos la flecha.


Ver solución

pagina1.html





funciones.js



Retornar