Cambiar el color de una celda al pasar el ratón

Escrito por J.F. el Viernes, 27 de Julio del 2007 a las 13:05

Para hoy un ejemplo muy sencillito con Javascript, cambiar el color de una celda al posar el ratón. Para ello haremos uso de los eventos onMouseOut (desencadena el evento o función cuando el ratón está fuera de la zona) y onMouseOver(se ejecuta el evento o función al posar el cursor del ratón). Puede ser un resultado vistoso a la hora de elaborar tablas con enlaces, menús, etc. Puedes adaptarlo a otro elemento HTML que no sea una celda, todo es cambiar el código y adecuarlo a nuestro gusto. Aquí está el código:

TEXTO PLANO

HTML:

1. <table border=0 cellpadding=0 cellspacing=0>
2. <tr>
3. <td onmouseover='this.style.background="red"' onmouseout='this.style.background="white"'>
4. Texto de la celda
5. </td>
6. </tr>
7. </table>

Aquí podeis ver el ejemplo funcionando:

Texto de la celda

Categoria: HTML, Javascript

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Deja un comentario

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>