Foros del Web » Creando para Internet » HTML »

Iluminar las Celdas al Pasar el Cursor

Estas en el tema de Iluminar las Celdas al Pasar el Cursor en el foro de HTML en Foros del Web. 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...
  #1 (permalink)  
Antiguo 21/08/2010, 18:07
 
Fecha de Ingreso: agosto-2010
Mensajes: 7
Antigüedad: 7 años, 3 meses
Puntos: 0
Iluminar las Celdas al Pasar el Cursor

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
  #2 (permalink)  
Antiguo 21/08/2010, 19:09
 
Fecha de Ingreso: agosto-2010
Mensajes: 7
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Iluminar las Celdas al Pasar el Cursor

no0 hay nadie?¿??
  #3 (permalink)  
Antiguo 21/08/2010, 19:09
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 6 meses
Puntos: 309
Respuesta: Iluminar las Celdas al Pasar el Cursor

Pues el código es bastante sencillo, no creo que haga falta recurrir al foro para usarlo, búscalo en google
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #4 (permalink)  
Antiguo 21/08/2010, 19:12
 
Fecha de Ingreso: agosto-2010
Mensajes: 7
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Iluminar las Celdas al Pasar el Cursor

Cita:
Iniciado por _cronos2 Ver Mensaje
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
  #5 (permalink)  
Antiguo 21/08/2010, 20:13
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Respuesta: Iluminar las Celdas al Pasar el Cursor

Cita:
Iniciado por Chules7 Ver Mensaje
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

__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #6 (permalink)  
Antiguo 21/08/2010, 23:26
 
Fecha de Ingreso: agosto-2010
Mensajes: 14
Antigüedad: 7 años, 4 meses
Puntos: 0
De acuerdo Respuesta: Iluminar las Celdas al Pasar el Cursor

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
  #7 (permalink)  
Antiguo 21/08/2010, 23:54
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Iluminar las Celdas al Pasar el Cursor

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;}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #8 (permalink)  
Antiguo 25/08/2010, 07:27
 
Fecha de Ingreso: octubre-2009
Ubicación: Sevilla
Mensajes: 46
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Iluminar las Celdas al Pasar el Cursor

Chules ... usa esta segunda opcion que te ha puesto Ag666 .... en concreto creo que te servira mejor el codigo del efecto en tablas especificas.
  #9 (permalink)  
Antiguo 25/08/2010, 07:50
 
Fecha de Ingreso: agosto-2010
Mensajes: 56
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Iluminar las Celdas al Pasar el Cursor

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:
Ver original
  1. td:hover
  2. {
  3.    color: white; /*Por ejemplo*/
  4. }

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:
Ver original
  1. <table id="tabla_con_efecto" ... >...</table>
- En el CSS, añade:
Código CSS:
Ver original
  1. #tabla_con_efecto:hover
  2. {
  3.    color: white;
  4. }

PARA LA SEGUNDA OPCIÓN:
----------------------------------
- En el HTML:
Código HTML:
Ver original
  1. <table class="tabla_con_efecto" ... >...</table>
- En el CSS:
Código CSS:
Ver original
  1. table.tabla_con_efecto:hover
  2. {
  3.    color: white;
  4. }

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
  #10 (permalink)  
Antiguo 26/08/2010, 14:48
 
Fecha de Ingreso: agosto-2010
Mensajes: 7
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Iluminar las Celdas al Pasar el Cursor

amigos,lo que pasa que en el panel de mi foro no hay un aprtado de CSS dolo HTML...
gracias
  #11 (permalink)  
Antiguo 26/08/2010, 14:54
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Iluminar las Celdas al Pasar el Cursor

puedes intentar insertando el css entre las etiquetas

Código HTML:
Ver original
  1. <style type="text/css">
  2. .tabla1 td{background:#ccc;}
  3. .tabla1 td:hover{background:#f1f1f1;}

no creo que sea lo correcto ya que supongo se insertara dentro del body pero puede que te funcione
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #12 (permalink)  
Antiguo 26/08/2010, 15:03
 
Fecha de Ingreso: agosto-2010
Mensajes: 7
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Iluminar las Celdas al Pasar el Cursor

algunos tutoriales habklan de [jQuery] pero no los entiendo.. :S
  #13 (permalink)  
Antiguo 28/08/2010, 09:50
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 6 meses
Puntos: 309
Respuesta: Iluminar las Celdas al Pasar el Cursor

Cita:
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 (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #14 (permalink)  
Antiguo 29/08/2010, 03:53
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Iluminar las Celdas al Pasar el Cursor

Cita:
Iniciado por _cronos2 Ver Mensaje
La etiqueta <style> va en el head.
Saludos (:
ya se que la etiqueta <style> se coloca en el head, por eso dije que

Cita:
no creo que sea lo correcto ya que supongo se insertara dentro del body pero puede que te funcione
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #15 (permalink)  
Antiguo 29/08/2010, 09:18
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Iluminar las Celdas al Pasar el Cursor

Hola:

Cita:
Iniciado por Ag666 Ver Mensaje
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.

  #16 (permalink)  
Antiguo 29/08/2010, 11:37
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Iluminar las Celdas al Pasar el Cursor

Cita:
Iniciado por jomaruro Ver Mensaje
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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #17 (permalink)  
Antiguo 29/08/2010, 16:08
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Iluminar las Celdas al Pasar el Cursor

Hola:

Cita:
Iniciado por Ag666 Ver Mensaje
pero bueno, no tiene tanta importancia ya no les discutire
Tienes razón en algo, no vale la pena discutirlo.

Saludos.

  #18 (permalink)  
Antiguo 29/08/2010, 17:06
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 6 meses
Puntos: 309
Respuesta: Iluminar las Celdas al Pasar el Cursor

Cita:
Iniciado por Ag666
no creo que sea lo correcto ya que supongo se insertara dentro del body pero puede que te funcione
Cita:
Iniciado por _cronos2
La etiqueta <style> va en el head.
Saludos (:
Perdón, entendí mal tus palabras.
Saludos :D
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red

Etiquetas: celdas, cursor, pasar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:09.