Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Iluminar Celdas de una tabla HTML
#1
a cuestión trata de que las celdas de una tabla se "iluminen" cuando situamos el ratón sobre ellas, y se "desiluminen" cuando el ratón salga de las mismas.

Para ello montamos nuestra tabla y le damos nombres a cada TD que pueda ser iluminado. Por ejemplo:

<table>
<tr>
<td name="c1" id="c1">
</td><td name="c2" id="c2">
</td></tr>
</table>

y ahora controlamos sus eventos OnMouseOver y OnMouseOut de la siguiente forma:


<table>
<tr>
<td name="c1" id="c1" onmouseover="javascript:Iluminar(this)" onmouseout="javascript:Apagar(this)">
</td><td name="c2" id="c2" onMouseOver="javascript:Iluminar(this)" OnMouseOut="javascript:Apagar(this)"></td></tr>
</table>

Esto hace que cada vez que pasemos por encima de la celda c1 ó c2 se llame a la función javascript Iluminar() pasándole como parámetro "this" (o sea, la propia celda) y cuando se sale de la misma se llama a Apagar.

Para las funciones Iluminar y Apagar utilizo la propiedad className del objeto, de forma que si he diseñado un estilo CSS similar a:

<style>
.celda
{
background-color:#0000FF;
color: #ffffff;
font-weight:bold;
}
.celda_iluminada
{
background-color:#FF0000;
color:#FFFF00;
font-weight:bold;
}
</style>


Puedo alterar en cualquier momento la clase de estilo de un objeto sin más que hacer lo siguiente con Javascript:

function Iluminar(obj){
obj.className="celda_iluminada";
}

function Apagar(obj){
obj.className="celda";
}

Otra opción sin usar hojas de estilo sería cambiar el color de background de la celda así:

function Iluminar(obj){
obj.style.bgColor="#FF0000";
}

function Apagar(obj){
obj.style.bgColor="#0000FF";
}

Pero aunque esto es correcto, modificar el className me permite cambiar varias propiedades de una sóla vez (no sólo el background sino también el color de fuente y en general todo lo que se pueda incluir en una clase CSS) mientras que haciéndolo por modificaciones sobre style necesito una línea para cada propiedad que quiero cambiar.
Visita my web no te Arrepentiras ==> Estreno 2014
WWW
#2
Muy interesante este efecto, lo tendré en cuenta para si lo puedo aplicar en blogger. Gracias por tu aporte!
[Imagen: 5z4em.png]
Guía Panel Clientes ☼   ☼ WIKI ☼   ☼  DNS SKYLIUM ☼   ☼ NORMAS  ☼   ☼ PLANES HOSTING




WWW
#3
No sabía como hacerlo ... .-. Nunca esta de más aprender un poco de Js Sonrisa


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
Sonrisa Login->html+js+ajax+php wpadilla 2 263 05-11-2017, 12:39 PM
Último mensaje: piensaengrande
  PRIMER PAGINA WEB HTML DEL MUNDO Smithcanal 27 956 21-10-2017, 01:47 AM
Último mensaje: ReyNexo23
  Plantillas HTML Responsive Free Profesionales gassip 16 750 13-06-2017, 03:45 AM
Último mensaje: gassip
Música [Aporte] Reproductor de audio html djsmokingcr 11 700 02-05-2017, 03:04 AM
Último mensaje: gassip
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 319 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Expandir etiquetas HTML en documento .php con EMMET gassip 2 427 18-11-2016, 07:28 PM
Último mensaje: DaveNPlay
  [Aporte] PcTag: Información HTML KesiaMuller 0 337 28-10-2016, 05:42 AM
Último mensaje: KesiaMuller
  [Tutorial] Curso de PSD a HTML a WP habacuc78 14 879 31-08-2016, 09:33 PM
Último mensaje: ServiRemate
  [Aporte] Codigo para renombrar tabla MySQL gassip 3 481 23-12-2015, 08:10 AM
Último mensaje: AbaddonOrmuz
  Elementos que desaparecieron de HTML 5 Kevin9908 2 380 02-08-2015, 04:55 PM
Último mensaje: avdarie



Usuarios navegando en este tema: 1 invitado(s)