[POO] Faire un OnClick qui annule le onMouseOver

**Fanfan92** · 31/01/2009, 15h54

Bonjour,

Je cherche à faire des onglets qui changent de couleur quand on les survole, sauf s'il s'agit de l'onglet actif.

Voici une partie de mon code :
Son fonctionnement est le suivant : quand on clique sur un des onglet, la fonction OngletClick est appelée. Celle ci change la classe de l'onglet pour le mettre d'une autre couleur et change la classe des autres onglets non sélectionnés pour les mettre d'une autre couleur.
J'ai ensuite ajouté des rollover classique sur mes onglets. Probleme : quand on survole l'onglet selectionné, il change aussi de couleur et ne reviens pas a sa couleur d'origine, mais a la couleur des onglets non selectionnées. J'ai ensuite fait différentes tentatives, comme de récupérer la couleur de l'onglet avant de faire le rollover,... ma derniere tentative est celle ci dessous ou j'ai défini 2 fonctions rollover() et rollout() qui testent deja si l'onglet est l'onglet actif, avant de faire le rollover. Mais ca ne marche pas non plus, car quand on selectionne un onglet, l'ancien sélectionné reste dans la couleur des onglets selectionnés....
Bref, je crois que je me suis bien compliqué, ce qu'il faudrait c'est que quand le OnClick se déclenche, le onMouseOut ne se fasse pas...

Si quelqu'un a une idée

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
51
 
<head> 
<style> 
.Onglet{
BACKGROUND-COLOR: #DC4362;
}
.OngletSelectionne{
BACKGROUND-COLOR: #524131;
}
</style>
<script language="JavaScript" type="text/JavaScript"> 
function OngletClick( numOnglet )
{
	for (i = 0; i < 4; i++)
	{
		document.getElementById('onglet'+i).className = "Onglet";
		document.getElementById('contenu'+i).style.display = "none";
 
	}
	document.getElementById('onglet'+numOnglet).className = "OngletSelectionne";
	document.getElementById('contenu'+numOnglet).style.display = "block";
}
 
function rollover(num){
	var x = document.getElementById('onglet'+num);
	if (x.className == "Onglet"){
		x.style.backgroundColor = "#FF99CC";
	}
}
 
function rollout(num){
	var x = document.getElementById('onglet'+num);
	if (x.className == "Onglet"){
		x.style.backgroundColor = "#DC4362";
	}
	else if (x.className == "OngletSelectionne"){
		x.style.backgroundColor = "#524131";
	}
}
</script> 
</head> 
<body onLoad="OngletClick(0);"> 
<table align="center" width="988" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
        <td ID="onglet0" width="114" onMouseOver="rollover(0);" onMouseOut="rollout(0);" ONCLICK="OngletClick(0);">Onglet0</td> 
        <td ID="onglet1" width="114" onMouseOver="rollover(1);" onMouseOut="rollout(1);" ONCLICK="OngletClick(1);">Onglet1</td> 
        <td ID="onglet2" width="114" onMouseOver="rollover(2);" onMouseOut="rollout(2);" ONCLICK="OngletClick(2);">Onglet2</td> 
        <td ID="onglet3" width="114" onMouseOver="rollover(3);" onMouseOut="rollout(3);" ONCLICK="OngletClick(3);">Onglet3</td> 
      </tr>
</table>
</body>

**Jumano** · 31/01/2009, 22h53

Bonsoir,
Tu veux modifer le style d'un élément qui n'existe pas :

Code :

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

document.getElementById('contenu'+i).style.display = "none";

**Fanfan92** · 01/02/2009, 13h39

Hello,

En fait ma question ne concernait pas cette partie, donc je n'ai pas copié tout mon code, j'ai juste mis la partie intéressante pour que l'on voit de suite la partie qui me pose souci.
document.getElementById('contenu'+i).style.display = "none"; fait référence a des div qui s'affichent ou se cachent suivant que l'onglet est sélectionné ou non. J'aurais peu-être du commenter ces 2 lignes pour que vous puissiez tester tel quel.

Voici le code sans les 2 lignes et avec des styles un peu plus fournis pour que vous puissiez directement tester.

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<head> 
<style> 
.Onglet{
cursor:pointer;
FONT: 14px Arial;
COLOR: #F3EDD5;
FONT-WEIGHT: normal;
TEXT-ALIGN: center;
 
HEIGHT: 40px;
BACKGROUND-COLOR: #DC4362;
 
border-bottom-width:1px;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;
border-style:solid;
border-color:#EFE5CA;
}
 
.OngletSelectionne{
FONT: 14px Arial;
COLOR: #F3EDD5;
FONT-WEIGHT: bold;
TEXT-ALIGN: center;
 
HEIGHT: 40px;
BACKGROUND-COLOR: #524131;
 
border-bottom-width:0px;
border-left-width:0px;
border-right-width:0px;
border-top-width:1px;
border-style:solid;
border-bottom-color:#524131;
border-top-color:#EFE5CA;
}
</style>
<script language="JavaScript" type="text/JavaScript"> 
function OngletClick( numOnglet )
{
	for (i = 0; i < 4; i++)
	{
		document.getElementById('onglet'+i).className = "Onglet";
	}
	document.getElementById('onglet'+numOnglet).className = "OngletSelectionne";
}
 
function rollover(num){
	var x = document.getElementById('onglet'+num);
	if (x.className == "Onglet"){
		x.style.backgroundColor = "#FF99CC";
	}
}
 
function rollout(num){
	var x = document.getElementById('onglet'+num);
	if (x.className == "Onglet"){
		x.style.backgroundColor = "#DC4362";
	}
	else if (x.className == "OngletSelectionne"){
		x.style.backgroundColor = "#524131";
	}
}
</script> 
</head> 
<body onLoad="OngletClick(0);"> 
<table align="center" width="988" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
        <td width="4" height="40">&nbsp;</td> 
        <td ID="onglet0" width="114" onMouseOver="rollover(0);" onMouseOut="rollout(0);" ONCLICK="OngletClick(0);">Onglet0</td> 
        <td width="4" height="40">&nbsp;</td> 
        <td ID="onglet1" width="114" onMouseOver="rollover(1);" onMouseOut="rollout(1);" ONCLICK="OngletClick(1);">Onglet1</td> 
        <td width="4" height="40">&nbsp;</td> 
        <td ID="onglet2" width="114" onMouseOver="rollover(2);" onMouseOut="rollout(2);" ONCLICK="OngletClick(2);">Onglet2</td> 
        <td width="4" height="40">&nbsp;</td> 
        <td ID="onglet3" width="114" onMouseOver="rollover(3);" onMouseOut="rollout(3);" ONCLICK="OngletClick(3);">Onglet3</td> 
        <td width="4" height="40">&nbsp;</td> 
      </tr>
</table>
</body>

**StAfX** · 02/02/2009, 14h39

Salut Fanfan,

pense bien que lorsque tu change la class d'un element par js le style ne s'applique pas avant d'être rechargé, donc tu dois lui rappeler ce que tu souhaites... du genre couleur...

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
<script language="JavaScript" type="text/JavaScript"> 
function OngletClick( numOnglet )
{
	var i;
	for (i = 0; i < 4; i++)
	{
		if( i != numOnglet) {
		document.getElementById('onglet'+i).className = "Onglet";
		document.getElementById('onglet'+i).style.backgroundColor = '#DC4362';
		}
	}
	document.getElementById('onglet'+numOnglet).className = "OngletSelectionne";
	document.getElementById('onglet'+numOnglet).style.backgroundColor = "#524131";
}
 
function rollover(num){
	var x = document.getElementById('onglet'+num);
	if (x.className == "Onglet"){
		x.style.backgroundColor = "#FF99CC";
	}
}
 
function rollout(num){
	var x = document.getElementById('onglet'+num);
	if (x.className == "Onglet"){
		x.style.backgroundColor = "#DC4362";
	}
	else if (x.className == "OngletSelectionne"){
		x.style.backgroundColor = "#524131";
	}
}
</script> 
</head> 
<body onLoad="OngletClick(0);"> 
<table align="center" width="988" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
        <td width="4" height="40">&nbsp;</td> 
        <td Class="OngletSelectionne" Id="onglet0" width="114" OnClick="OngletClick(0);" onMouseOver="rollover(0);" onMouseOut="rollout(0);" >Onglet0</td> 
        <td width="4" height="40">&nbsp;</td> 
        <td Class="Onglet" Id="onglet1" width="114" OnClick="OngletClick(1);" onMouseOver="rollover(1);" onMouseOut="rollout(1);">Onglet1</td> 
        <td width="4" height="40">&nbsp;</td> 
        <td Class="Onglet" Id="onglet2" width="114" OnClick="OngletClick(2);" onMouseOver="rollover(2);" onMouseOut="rollout(2);" >Onglet2</td> 
        <td width="4" height="40">&nbsp;</td> 
        <td Class="Onglet" Id="onglet3" width="114" OnClick="OngletClick(3);" onMouseOver="rollover(3);" onMouseOut="rollout(3);" >Onglet3</td> 
        <td width="4" height="40">&nbsp;</td> 
      </tr>
</table>
</body>

Si je peux me permettre quelques conseils... évite de mettre des noms de class/id/variables...trop ressemblants, evite les majuscules en debut de variables/noms...ou les noms de variables qui ne veulent rien dire ('x') quand c'est possible (je ne parle pas des compteurs ou 'i', 'j'.. sont les bienvenue) ... ça évite des confusions. (il n'y a rien d'obligatoire, ni de méchant, mais c'est pour des raisons pratiques et mes remarques se veulent constructives...)

a+

Stef.

**Fanfan92** · 02/02/2009, 22h32

Salut,

Merci pour ta réponse. Je note les commentaires sur les noms de variables, c'est toujours intéressant ce genre de conseils.

Je ne savais pas que lorsque l'on change la classe d'un element par js le style ne s'applique pas avant d'être rechargé. Je pensais que lorsque je faisais document.getElementById('onglet'+i).className = "Onglet"; cela avait pour effet de recharger la class pour cet element.
Le code que tu m'a donné fonctionne, mais pour ma culture j'aimerai comprendre le fonctionnement.

1) Je vois que tu as mis Class="Onglet" dans mes <td>. Cela me regle un autre probleme que j'avais qui faisait que les onglet mettaient un petit moment au chargement de la page pour "acquérir leur style". Maintenant ils ont leur style dès le début... Ce que je ne comprends pas très bien, car je pensais que le <body onLoad="OngletClick(0);"> se chargeait dès le début de l'affichage du body...

2) Je ne comprends pas bien a quel moment se recharge justement le style de mes classes.
Car actuellement, avec ton code, dans le cas ou j'arrive sur un onglet qui n'est pas l'onglet selectionné :
- J'arrive dessus : la fonction rollover se déclenche, l'element est de la classe Onglet, il passe donc en rose clair.
- Je clique dessus : la fonction OngletClick se déclenche, l'onglet recoit la classe OngletSelectionne et on met sa couleur a marron.
A ce point, l'onglet n'est pas encore "en classe OngletSelectionne de maniere effective", d'apres ce que tu me dis, c'est pourquoi on a indiqué la couleur de maniere explicite.
- Maintenant je sors de l'onglet avec ma souris, la fonction rollout se déclenche. La, pour que l'onglet prenne bien sa couleur marron et non rose, il faut forcement que son className soit "OngletSelectionne". C'est le cas, car le code marche.

Du coup, 2 solutions :
- ou bien le classname qui a été défini dans OngletClick n'a pris effet qu'a un moment que j'ignore, ce que je ne pense pas.
- Ou bien, lorsque l'on fait un classname = "Onglet", cela change bien le nom de la classe, mais n'applique absolument pas les attributs de la classe a l'objet.

J'aurais tendance à dire que c'est la 2eme solution. Mais pourtant, lorsque je n'avais pas les rollovers, le code suivant marchait tres bien, ce qui prouve que le changement de classe a bien lieu :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function OngletClick( numOnglet )
{
	var i;
	for (i = 0; i < 4; i++)
	{
		if( i != numOnglet) {
		document.getElementById('onglet'+i).className = "Onglet";
		}
	}
	document.getElementById('onglet'+numOnglet).className = "OngletSelectionne";
}

Du coup, je suis perdu, peut-etre pourra tu m'expliquer le phénomene, car qque chose m'echappe.

**StAfX** · 03/02/2009, 00h13

re...,

2)

je suis désolé, je t'ai dit une bétise tout à l'heure

(c'était pour voir si tu suivais...

)

le style s'applique immédiatement, ta class "OngletSelectionne" est bien prise en compte, mais ce qui t'oblige à rajouter le changement de couleur est en effet ta fonction sur onmouseover, ton rollover (bien vu!!). j'explique :

tu as un conflit entre class et id... il y a une certaine hiérarchie:

l'id précise la classe qui précise le tag...
or quand tu applique la class "OngletSelectionne" tu spécifie des attributs (curseur, background...) qui s'appliquent à la class. Or, lorsque tu cliques pour effectuer ce changement, tu as auparavent activé le onmouseover. Celui-ci a attribué un background dans ton id. le background de la class n'a alors plus aucune importance... C'est pourquoi il faut rajouté la propriété affecté à l'id et non la class. La fonction Onclick étant activée après la onmouseover (puisque tu es audessus du bouton avant de cliquer et que la fonction onmouseover ne s'applique qu'une fois), c'est ce dernier background qui est présent.

j'espère avoir été a peu près clair...

n'hésite pas à me redemander

1)Je n'ai pas de réponse 'théorique' pour cela, mais mon expérience ma montré comme la tienne que le <body onLoad=""> n'est pas la meilleur solution. D'ailleurs, c'est le genre de choses à éviter car ne perd jamais de vu que le javascript peut-être désactivé chez l'utilisateur..(voir les critères d'accessibilité).

A+

Stef.

PS:
ton système d'onglet est efficace, et plutôt soft (comparé à ce que j'ai pu voir (et faire!)) mais il ne sera pas valide W3C, car ta class ongletSelectionne ne s'appliquera toujours a un seul élément, ce qui est interdit pour une class, dont le but doit être de regrouper plusieurs élément dans un même style.

Si tu veux faire un système valide (ce que je te conseille), il faut modifier les propriétés une à une sur les id, en bouclant pour chaque onglet... c'est certes plus lourd, mais valide. (ce n'est surement pas la seule solution, s'il y a d'autres idées, suis preneur!).

**Fanfan92** · 03/02/2009, 10h04

Ok, je pense avoir bien compris.
Je défini un backgroundColor explicitement sur un objet (accédé par son id). Ce backgroundColor prend le dessus sur celui de la classe qui était définie pour l'objet.
Pour remettre la couleur, il faut redéfinir le backgroudColor explicitement de la meme manière.

Merci beaucoup pour ces explications, qui m'ont été fort utiles

A+

ps : cela semble bien marcher sous IE 6 et 7, firefox et Chrome que j'ai testés. Alors tant pis pour le W3C pour ce petit détail (c'est quand meme le détail qui tue qu'une classe doivent s'appliquer a au moins 2 elements^^ )

[POO] Faire un OnClick qui annule le onMouseOver

JavaScript

Discussions similaires

Partager

Partager