gestion évenement onclick

**kagura31** · 18/03/2011, 15h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Billy KiT** · 18/03/2011, 16h04

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**nadox** · 18/03/2011, 19h32

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" ?

**kagura31** · 21/03/2011, 07h34

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.

**nadox** · 21/03/2011, 18h08

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

**jopopmk** · 22/03/2011, 11h38

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

gestion évenement onclick

JavaScript

Vue hybride

Discussions similaires

Partager

Partager