gestion évenement onclick

Version imprimable

Bonjour,

Ci dessous une representation simple de mon code.
Mes champs changent de couleur en fonction de l'évenement.
Au debut le champ est gris, quand on passe la souris il devient rose et si on clique dessus il devient bleu.
Ce que j'aimerai faire c'est que le champ qui est devenu bleu devient rose quand je passe ma souris dessus et reste bleu le cas contraire.

Merci pour votre aide
Cordialement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
 
<head>
 
<style type="text/css">
	.document { background-color: #AECBD4 }
	.documentOver { background-color:#F9E0C7  }
	.documentVisited { background-color:blue}
</style>
 
 
<script language="JavaScript" type="text/javascript">
<!-- 
function Change(id, Mode)
{
	var Etat = document.getElementById(id).className;
	switch(Mode)
	{
		case "Over":
			if(Etat!="documentVisited" )
			document.getElementById(id).className="documentOver";
		break;
		case "Out":
			if(Etat!="documentVisited" )
			document.getElementById(id).className="document";
		break;
		case "Click":
			document.getElementById(id).className="documentOver";
		break;
	}
}
// -->
</script>
</head>
 
<body text="#000000" bgcolor="#FFFFFF">
<TABLE>
	<tr id="E9E8C381C94DA128C125784D0055B094" class="document" onMouseOver="Change('E9E8C381C94DA128C125784D0055B094','Over');" onMouseOut="Change('E9E8C381C94DA128C125784D0055B094','Out');" onClick="Change('E9E8C381C94DA128C125784D0055B094','Click');" >
		<td>08/03/2011</td>
	</tr>
	<tr id="E9E8C381C94DA128C125784D0055B095" class="document" onMouseOver="Change('E9E8C381C94DA128C125784D0055B095','Over');" onMouseOut="Change('E9E8C381C94DA128C125784D0055B095','Out');" onClick="Change('E9E8C381C94DA128C125784D0055B095','Click');" >
		<td>09/03/2011</td>
	</tr>
	<tr id="E9E8C381C94DA128C125784D0055B096" class="document" onMouseOver="Change('E9E8C381C94DA128C125784D0055B096','Over');" onMouseOut="Change('E9E8C381C94DA128C125784D0055B096','Out');" onClick="Change('E9E8C381C94DA128C125784D0055B096','Click');" >
		<td>10/03/2011</td>
	</tr>
</TABLE>
 
</body>
</html>

18/03/2011, 16h04
Billy KiT

Salut,
pourquoi ne pas utiliser les styles pour le over et le out

Code:

.monstyle:hover { color:pink; }

Il faut penser à déclarer le DOCTYPE pour que cela fonctionne, mais je ne connais pas la compatibilité sur les anciens navigateurs.
18/03/2011, 19h32
nadox

Bonjour,

.monstyle:hover n'est pas correctement pris en charge sur les anciennes versions de IE.
Ca serait pourtant une bonne solution...
Le rose sur le survol en css, et le bleu sur le click en javascript...

Sinon je suppose que le problème est que le lien redevient gris lorsqu'on enlève la souris ?
D'où vient la classe "documentVisited" ?
21/03/2011, 07h34
kagura31

Bonjour,

Merci pour vos réponses.
C'est exacte, mon problème vient que le lien redevient gris lorsqu'on enlève la souris.
La classe "documentVisited" est une classe quelqueconque.
21/03/2011, 18h08
nadox

Dans l'exemple que tu donne, le lien ne deviens jamais bleu non plus...

Salut,

Premier souci : dans le case "Click" tu mets "documentOver", donc aucune chance qu'il soit bleu sur le click ; remplace par "documentVisited".

Deuxième souci : sur le case "Over" tu testes si ton état précédent était "documentVisited" pour appliquer la classe "documentOver", du coup les TR où tu as déjà cliqué ne passe pas à "documentOver" lorsque tu passes la souris dessus (or c'est ce que tu recherches je crois). Il faut donc faire sauter la condition, ce qui va nous amener à un nouveau souci : la condition dans ton case "Out" n'aura plus de sens, car la valeur de Etat sera toujours à "documentOver". Il faut donc passer par un autre attribut de tes TR, un créé de toute pièce, ce qui donnerait un truc comac :
Code:

1 2 3 4 5 6 7 8 9 10 function Change(id, Mode) { var tr = document.getElementById(id); switch(Mode) { case "Over": tr.className = "documentOver"; break; case "Out": tr.className = (tr.getAttribute("visited"))?"documentVisited":"document"; break; case "Click": tr.className = "documentVisited"; tr.setAttribute("visited", "true"); break; } }
En espérant ne pas avoir compris de travers ^^ et avoir aidé pour ton pb.