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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : onClick + onmouseover etc...comment mettre en place ca ?

swich

snps

'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

Publicité

nagadoudi

T nagadoudi, rentre ta finette

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

swich

snps

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

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

dilyfe

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+

swich

snps

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..)

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Un bouton à la place d'un lien ?	Je c pas koi mettre comme comentaire de code !!!
onmouseover/out : assigner plusieurs fonctions	quelque chose de "scrollable" où mettre des textbox, boutons, ...
onmouseover et css	[XML/XSL] Comment mettre du html dans un document xml ?
[XML] Mettre en oeuvre un Schema	mettre des template dans rational rose
[J2EE]Recherches conseils pour se mettre au techniques J2EE	[SGBD] Comment mettre une vue à jour ?
Plus de sujets relatifs à : onClick + onmouseover etc...comment mettre en place ca ?

Page générée en 0.060 secondes