cambio de color segun diferentes eventos de raton

topito2 · #1 (**permalink**) 23/03/2005, 12:49

¿como puedo hacer para que al ponerme sobre una fila de celdas estas cambien de color... y si salgo de ellas retornen al color original. Pero tambien, si hago clic sobre ellas (como seleccionandolas) cambien a un segundo color y despues al hacer clic nuevamente (como deseleccionandolas) vuelvan al color original?...

¿capichi?

¿pregunta que merece una ecuacion?jejeje

muchas gracias

topito2 · #2 (**permalink**) 23/03/2005, 12:56

PD: la idea es que si selecciono una fila(onclick) y paso el mouse sobre(onmouseover) esta no cambie de color hasta que vuelva a hacer click(deseleccionar). osea el vento on mouseover solo debe funcionar si no he hecho clic sobre la fila.

..gracias por entenderme, pero sino me entienden me avisan

topito2 · #3 (**permalink**) 23/03/2005, 13:02

al puro estilo de las tablas de phpmyadmin

furoya · #4 (**permalink**) 26/03/2005, 12:58

hola topito2 :

¿Seguro quieres filas?. Porque es relativamente fácil. A menos que estés usando algún navegador viejo.

Mira este enlace

http://www.htmlweb.net/webscript/tab...a_1_texto.html

Yo tenía hecho uno con columnas (porque me pareció más dificil). Te lo dejo para que adaptes el asunto del "seleccionado" a las filas.

Código:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style>
table{border: 3px inset }
td{border: 2px solid}
.blanco{background:#ffffff}
.gris{background:#cccccc}
.lima{background:#00ff00}
</style>
<script>
var filas = 3;

function color1(C,T){
if(T.className != "lima"){
for(i=0; i<filas; i++){
document.getElementById(C+i).className='gris';
}}}

function color2(C,T){
if(T.className != "lima"){
for(i=0; i<filas; i++){
document.getElementById(C+i).className='blanco';
}}}

function color3(C,T){
if(T.className == "lima"){ 
selec=1;
for(i=0; i<filas; i++){
document.getElementById(C+i).className='blanco';
}}
else {
selec=0;
for(i=0; i<filas; i++){
document.getElementById(C+i).className='lima';
}}}

</script>
</HEAD>
<BODY>

<table class="blanco">
<tr>
<td id="alfa0" onmouseover="color1('alfa',this)" onmouseout="color2('alfa',this)" onclick="color3('alfa',this)">DOS </td>
<td id="bravo0" onmouseover="color1('bravo',this)" onmouseout="color2('bravo',this)" onclick="color3('bravo',this)">DOS </td>
<td id="charly0" onmouseover="color1('charly',this)" onmouseout="color2('charly',this)" onclick="color3('charly',this)">DOS </td>
</tr><tr>
<td id="alfa1" onmouseover="color1('alfa',this)" onmouseout="color2('alfa',this)" onclick="color3('alfa',this)">DOS </td>
<td id="bravo1" onmouseover="color1('bravo',this)" onmouseout="color2('bravo',this)" onclick="color3('bravo',this)">DOS </td>
<td id="charly1" onmouseover="color1('charly',this)" onmouseout="color2('charly',this)" onclick="color3('charly',this)">DOS </td>
</tr><tr>
<td id="alfa2" onmouseover="color1('alfa',this)" onmouseout="color2('alfa',this)" onclick="color3('alfa',this)">TRES </td>
<td id="bravo2" onmouseover="color1('bravo',this)" onmouseout="color2('bravo',this)" onclick="color3('bravo',this)">TRES </td>
<td id="charly2" onmouseover="color1('charly',this)" onmouseout="color2('charly',this)" onclick="color3('charly',this)">TRES </td>
</tr>
</table>

</BODY>
</HTML>

saludos

furoya