Ver Mensaje Individual
  #1 (permalink)  
Antiguo 09/08/2011, 03:47
Avatar de veriyo
veriyo
 
Fecha de Ingreso: junio-2010
Mensajes: 80
Antigüedad: 13 años, 10 meses
Puntos: 0
Rollover en tabla con 3 estados

Saludos a todos;

Quisiera hacer un rollover en una tabla (esto ya lo he conseguido) pero lo que no se hacer es que cuando hagas click en una celda esta se marque en color lila y que al marcar otra se quede en blanco y siga teniendo el efecto de rollover, las celdas tendrian 3 estado: 1 blanco, 2 rollover lila y 3 presionado lila. Os dejo un trocito del codigo y del css....

Código HTML:
<table width="620" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000"  
class="F_arial_11_centrado_negro" style="border-collapse:collapse; cursor:pointer">
    <tr id="tr_01_historicos_alarmas_alum" name="tr_01_historicos_alarmas_alum" 
	class="rollover_morado">
<td id="td_01_historicos_alarmas" name="td_01_historicos_alarmas" 
	  style="cursor:pointer" onClick="f_mostrar_mensajes_historicos_alarmas_alum(1)" 
	  width="48">0000001</td>
      <td width="90">13/06/2011 22:45 </td>
      <td><div align="left">Incidencia: Sobrecarga en salida Fase - 1.      </div></td>
      <td width="48">CM 04 </td>
      <td width="92">13/06/2011 22:49 </td>
    </tr>
    <tr class="rollover_morado">
      <td id="td_02_historicos_alarmas" name="td_02_historicos_alarmas" 
	  style="cursor:pointer" onClick="f_mostrar_mensajes_historicos_alarmas_alum(2)">0000001</td>
      <td>13/06/2011 11:00 </td>
      <td><div align="left">Puerta CM abierta . </div></td>
      <td>CN 10 </td>
      <td>&nbsp;</td>
    </tr>
    <tr class="rollover_morado">
      <td id="td_03_historicos_alarmas" name="td_03_historicos_alarmas" 
	  style="cursor:pointer" onClick="f_mostrar_mensajes_historicos_alarmas_alum(3)">0000001</td>
      <td>&nbsp;</td>
      <td class="F_arial_11_centrado_negro">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
	 <tr class="rollover_morado">
      <td id="td_04_historicos_alarmas" name="td_04_historicos_alarmas"
	  style="cursor:pointer">0000001</td>
      <td>&nbsp;</td>
      <td class="F_arial_11_centrado_negro">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td></table> 
css
Código HTML:
  tr.rollover_morado
  {
   background-color:#ffffff;
  }
  
  tr.rollover_morado:hover
  {
   background-color: #9999ff;
  }
si a alguien se le ocurre algo estare muy agradecida