Iluminar las Celdas al Pasar el Cursor

[Chules7]

Hola,soy nuevo en el foro y necesito ayuda...
por favor si alguien sabe Iluminarr las Celdas al Pasar el Cursor se lo agradecería mucho,gracias

[Chules7]

no0 hay nadie?¿??

[_cronos2]

Pues el código es bastante sencillo, no creo que haga falta recurrir al foro para usarlo, búscalo en google
Saludos (:

[Chules7]

Iniciado por _cronos2

Pues el código es bastante sencillo, no creo que haga falta recurrir al foro para usarlo, búscalo en [URL="http://www.google.es"]google[/URL]
Saludos (:

Me salen muchas cosas pero ninguna sierven..porfavor

[Daniel Ulczyk]

Iniciado por Chules7

Me salen muchas cosas pero ninguna sierven..porfavor

este enlace: http://lawrence.ecorp.net/inet/samples/dhtml-rollover-tble-cells-js.shtml surge inmediatamente en las primeras posiciones luego de buscar en Google: javascript table highlight cell cursor

[AndresJVB]

Hola. en estos días estaba haciendo eso mismo. LO logre con la ayuda de los amigos de acá del foto. Te cuento utilize CSS
Cree una hoja con los estilos

=================================================

.table{
width:auto;
height:40px;
border-spacing:2px;
font-family:Arial, Helvetica, sans-serif;
color:#6D7B8D;
font-size:12px;
}
tr{
background-color:#000033;
}
.encima{
color:#FFFFFF;
background-color:#1569C7;
}
.fuera{
color:#6D7B8D;
}

Y después en mi código HTML coloque la tabla así:

<table>
<tr>
<td id="celda1" width="100" align="center" onmouseover="this.className='encima'" onmouseout="this.className='fuera'"><b>HTML</b></td>
<td id="celda2" width="100" align="center" onmouseover="this.className='encima'" onmouseout="this.className='fuera'"><b>CSS</b></td>
<td id="celda3" width="100" align="center" onmouseover="this.className='encima'" onmouseout="this.className='fuera'"><b>JAVASCRIPT</b></td>
<td id="celda4" width="100" align="center" onmouseover="this.className='encima'" onmouseout="this.className='fuera'"><b>PHP</b></td>
</tr>
</table>

EN donde "this.className='encima'" le dices que al momento del evento onmouse over esa celda tomará la clase "ENCIMA" y al momento de evento onmouseout el estilo cambiará a "FUERA"


Espero que te sirva.! Cualquier cosa avisame.!
Saludos desde Venezuela

[ArturoGallegos]

Venga las opciones del java son buenas pero, creo que le vendría bien solo utilizar CSS
Con lo cual solo tendrías que especificar en tu hoja de estilos:
td:hover{background:#f1f1f1;}

o si solo deseas ese efecto en tablas especificas aplica una clase a la tabla:
<table class=”tabla1”> y tu css .tabla1 td:hover{background:#f1f1f1;}

[tupio]

Chules ... usa esta segunda opcion que te ha puesto Ag666 .... en concreto creo que te servira mejor el codigo del efecto en tablas especificas.

[dersir]

Eso del CSS es más sencillo. Simplemente es eso, en tu CSS tienes que especificar que cuando el cursor esté encima de un <td>, éste debe iluminarse. Para eso sólo tienes que añadir en tu CSS:

Código CSS:

td:hover
{
   color: white; /*Por ejemplo*/
}
 

Hecho de esta forma, el efecto va a afectar a todas las etiquetas <td> que tengas en ese documento. Si quieres que sólamente afecte a una de las tablas, entonces tienes dos opciones: identificarla bajo un nombre y aplicar el efecto sólo a esa tabla, o bien crear una clase y considerar la tabla de esa clase.

PARA LA PRIMERA OPCIÓN:
---------------------------------
- En el HTML, tu tabla tiene que quedar

Código HTML:

<table id="tabla_con_efecto" ... >...</table>
 

- En el CSS, añade:

Código CSS:

#tabla_con_efecto:hover
{
   color: white;
}
 

PARA LA SEGUNDA OPCIÓN:
----------------------------------
- En el HTML:

Código HTML:

<table class="tabla_con_efecto" ... >...</table>
 

- En el CSS:

Código CSS:

table.tabla_con_efecto:hover
{
   color: white;
}
 

La ventaja de hacerlo a través de clases es que puedes seleccionar un conjunto de tablas para que tengan el efecto, mientras que otras pueden no tenerlo. Sólo añades class="tabla_con_efecto" en la etiqueta <table> para cada tabla que quieras que lo tenga.

La ventaja de hacerlo a través de identificadores (y corregidme si me equivoco) es que es más rápido si sólo hay una tabla con efecto en todo el documento. El inconveniente estaría en querer aplicar el efecto a más de una tabla

Espero haberte ayudado, un saludo

[Chules7]

amigos,lo que pasa que en el panel de mi foro no hay un aprtado de CSS dolo HTML...
gracias

[ArturoGallegos]

puedes intentar insertando el css entre las etiquetas

Código HTML:

<style type="text/css">
.tabla1 td{background:#ccc;}
.tabla1 td:hover{background:#f1f1f1;}
</style>
 

no creo que sea lo correcto ya que supongo se insertara dentro del body pero puede que te funcione

[Chules7]

algunos tutoriales habklan de [jQuery] pero no los entiendo.. :S

[_cronos2]

no creo que sea lo correcto ya que supongo se insertara dentro del body pero puede que te funcione

La etiqueta <style> va en el head.
Saludos (:

[ArturoGallegos]

Iniciado por _cronos2

La etiqueta <style> va en el head.
Saludos (:

ya se que la etiqueta <style> se coloca en el head, por eso dije que

no creo que sea lo correcto ya que supongo se insertara dentro del body pero puede que te funcione

[jomaruro]

Hola:

Iniciado por Ag666

no creo que sea lo correcto ya que supongo se insertara dentro del body pero puede que te funcione

Si no estás seguro de la respuesta es mejor no darla a darla equivocada e inducir a otros a error. ¿no crees?

Saludos.

[ArturoGallegos]

Iniciado por jomaruro

Hola:
Si no estás seguro de la respuesta es mejor no darla a darla equivocada e inducir a otros a error. ¿no crees?

Saludos.

no dudo de mi respuesta, al insertar la etiqueta <style> dentro del body los estilos funcionaran, aun cuando esto no es lo correcto.

pero bueno, no tiene tanta importancia ya no les discutire

[jomaruro]

Hola:

Iniciado por Ag666

pero bueno, no tiene tanta importancia ya no les discutire

Tienes razón en algo, no vale la pena discutirlo.

Saludos.

[_cronos2]

Iniciado por Ag666

no creo que sea lo correcto ya que supongo se insertara dentro del body pero puede que te funcione

Iniciado por _cronos2

La etiqueta <style> va en el head.
Saludos (:

Perdón, entendí mal tus palabras.
Saludos :D