onClick + onmouseover etc...comment mettre en place ca ?

Marsh Posté le 02-04-2004 à 09:13:49

'lut tt le monde
voila j'ai un tableau, je voudrais que lorsque je passe sur une ligne, cette ligne change de couleur (et redevient normale des que je ne suis plus sur cette ligne)
mais aussi, que lorsque je clique sur une ligne, elle change de couleur, jusqu'a temps que je reclick dessus (je peux passer par dessus elle peut changer de couleur mais doit revenir à la couleur précedente)
vous voyez le truc ?
dc si qq'un a une petite astuce pour ca je suis preneur

Reply

Marsh Posté le 02-04-2004 à 09:13:49

Reply

Marsh Posté le 02-04-2004 à 10:58:45

Je viens justement de coder une fonctionnalité de ce genre, pour le mouseover uniquement.
Tu as le choix entre 2 solutions :

la plus moderne et simple à mettre en oeuvre : l'usage de la pseudo-classe :hover , qui nécessite un navigateur moderne qui comprend les CSS2 (c'est le cas de Mozilla, mais pas de IE6)
javascript : celle que je te décris ici :

Dans le <body> :

<table class="list">
<tr onmouseover="hover(this, true);" onmouseout="hover(this, false);">
<td>ligne 1, case 1</td>
<td>ligne 1, case 2</td>
</tr>
<tr onmouseover="hover(this, true);" onmouseout="hover(this, false);">
<td>ligne 2, case 1</td>
<td>ligne 2, case 2</td>
</tr>
</table>

Dans le css :

table.list tr.hover {
background-color: #ff8;
}

Dans le <head> :

Message édité par nagadoudi le 02-04-2004 à 11:00:30

Reply

Marsh Posté le 02-04-2004 à 11:24:55

merci bien,
mais je dois le faire sous IE6 :'(

Message édité par swich le 02-04-2004 à 11:25:24

Reply

Marsh Posté le 02-04-2004 à 11:41:18

Pour IE, à optimiser

La css :

Code :

.TR_Normal { background-color: #AECBD4 }
.TR_Survol { background-color: #79CEE9 }
.TR_Clique { background-color: #118BB1 }

Le js

Code :

function Change(id, Mode)
{
var Etat = document.getElementById("TR"+id).className;
switch(Mode)
{
case "Over":
if(Etat!="TR_Clique" )
document.getElementById("TR"+id).className="TR_Survol";
break;
case "Out":
if(Etat!="TR_Clique" )
document.getElementById("TR"+id).className="TR_Normal";
break;
case "Click":
if(Etat=="TR_Clique" )
document.getElementById("TR"+id).className="TR_Survol";
else
document.getElementById("TR"+id).className="TR_Clique";
break;
}
}

Le html

Code :

<TABLE>
<TR id="TR1" class="TR_Normal" onMouseOver="Change(1,'Over');" onMouseOut="Change(1,'Out');" onClick="Change(1,'Click');"><TD>Contenu du TD</TD></TR>
<TR id="TR2" class="TR_Normal" onMouseOver="Change(2,'Over');" onMouseOut="Change(2,'Out');" onClick="Change(2,'Click');"><TD>Contenu du TD</TD></TR>
<TR id="TR3" class="TR_Normal" onMouseOver="Change(3,'Over');" onMouseOut="Change(3,'Out');" onClick="Change(3,'Click');"><TD>Contenu du TD</TD></TR>
</TABLE>

A+

Reply

Marsh Posté le 02-04-2004 à 12:11:53

merci bien

oe donc en fait on peut pas se passer d'une fonction JSP, c'est dommage ca, j'aurais preferé du tout HTML (ok onmouseover c pas de l'html..)

Reply

onClick + onmouseover etc...comment mettre en place ca ?

Sujets relatifs:

Leave a Replay