[POO] Faire un OnClick qui annule le onMouseOver
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:
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> |
