allier onMouseOver, onMouseOut et onClick dans une seule fonction

Version imprimable

Bonjour,

Un problème simple à priori, mais je ne sais pas où chercher...

La fonction est toute simple, elle change le background de la ligne de table (<tr>) onMouseOver, et disparaît onMouseOut.

Code:

<tr align="left" onMouseOver="setPointer(this, '#C8E362')" onMouseOut="setPointer(this, '#FFFFFF')">

Et voici la fonction javascript:
Code:

1 2 3 4 5 6 7 8 function setPointer(theRow, thePointerColor) { if (typeof(theRow.style) == 'undefined' || typeof(theRow.cells) == 'undefined') { return false; } var row_cells_cnt = theRow.cells.length; for (var c = 0; c < row_cells_cnt; c++) { theRow.cells[c].bgColor = thePointerColor; } return true; }
Mais voilà, j'aimerais que la ligne reste de la couleur de survol (#C8E362 dans cet exemple) quand l'utilisateur clique (onClick),. Cette dernière resterait vert-clair, mais toutes les autres lignes continueraient à faire des rollovers si je passe dessus. Quelque chose comme :

Code:

<tr align="left" onMouseOver="setPointer(this, '#C8E362')" onMouseOut="setPointer(this, '#FFFFFF')" onClick="setPointer(this, '#C8E362')">

Bien sûr, ça ne fonctionne pas, car la partie onMouseOut interfère avec la partie onClick.

Comment faire pour dissocier ces deux comportements et arriver à l'effet décrit ci-dessus? Est-ce possible avec la fonction actuelle?

Merci infiniment pour toute idée/proposition 8-)

cc

12/09/2008, 15h12
SpaceFrog
avec un flag indiquant si la ligne a ete cliquée ou non (variable globale ou propriété du tr)
et un test dans la boucle d'attribution de couleur à savoir sur le flag est renseigné

essaye
Code:

1 2 <tr align="left" flag="0" onMouseOver="if(this.flag='0'){setPointer(this, '#C8E362')}" onMouseOut="if(this.flag='0'){setPointer(this, '#FFFFFF')}" onclick="this.flag=(this.flag=='0')?'1':'0';">
12/09/2008, 16h44
crypticcyco

Merci beaucoup de votre réponse. J'ai tenté de faire ce que vous avez indiqué, sans succès. J'ai aussi essayé de donner un ID unique à chaque <TR> mais ça n'a rien changé.

Y a-t-il d'autres solutions? Peut-être qu'il faut revoir l'ensemble de la fonction :koi:

Heu non il suffit de faire comme j'ai dit ...:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
 
 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
function setPointer(obj,couleur){
	if(obj.flag=='1'){return false;}
	obj.style.backgroundColor=couleur
	}
function intitr(){
	TabTr=document.getElementsByTagName('tr');
	for(i=0;TabTr[i];i++){
	TabTr[i].flag='0';
	}
	}
</script>	
 
<style type='text/css'>
td {border: solid 1px black;}
table{width:100%;}
</style>
</head>
 
<body onload="intitr()">
<table>
<tr align="left" onMouseOver="setPointer(this, '#C8E362')" onMouseOut="setPointer(this, '#FFFFFF')" flag="0" onclick="this.flag=(this.flag=='0')?'1':'0';this.style.backgroundColor=(flag=='1')?'red':'white';">
	<td>&nbsp</td>
</tr>
<tr align="left" onMouseOver="setPointer(this, '#C8E362')" onMouseOut="setPointer(this, '#FFFFFF')" flag="0" onclick="this.flag=(this.flag=='0')?'1':'0';this.style.backgroundColor=(flag=='1')?'red':'white';"> 
	<td>&nbsp</td>
</tr>
<tr align="left" onMouseOver="setPointer(this, '#C8E362')" onMouseOut="setPointer(this, '#FFFFFF')" flag="0" onclick="this.flag=(this.flag=='0')?'1':'0';this.style.backgroundColor=(flag=='1')?'red':'white';">
	<td>&nbsp</td>
</tr>
<tr align="left" onMouseOver="setPointer(this, '#C8E362')" onMouseOut="setPointer(this, '#FFFFFF')" flag="0" onclick="this.flag=(this.flag=='0')?'1':'0';this.style.backgroundColor=(flag=='1')?'red':'white';">
	<td>&nbsp</td>
</tr>
<tr align="left" onMouseOver="setPointer(this, '#C8E362')" onMouseOut="setPointer(this, '#FFFFFF')" flag="0" onclick="this.flag=(this.flag=='0')?'1':'0';this.style.backgroundColor=(flag=='1')?'red':'white';">
	<td>&nbsp</td> 
</tr>
<tr align="left" onMouseOver="setPointer(this, '#C8E362')" onMouseOut="setPointer(this, '#FFFFFF')" flag="0" onclick="this.flag=(this.flag=='0')?'1':'0';this.style.backgroundColor=(flag=='1')?'red':'white';">
	<td>&nbsp</td>
</tr>
</table>
</body>

[edit] j'avais oublié que firefox reclamait une initialisation des proprietés complémentaires des balises ...

16/09/2008, 11h19
crypticcyco
Merci pour cette précision, ça marche sous firefox maintenant.

Seul bémol, les <tr> restent colorés à chaque clic, alors que j'aimerais avoir un seul <tr> de couleur à la fois. J'ai tenté de réinitialiser la couleur de tous les <tr> en blanc lorsque l'utilisateur cliquait, avant d'exécuter la seconde fonction:

Code:

<tr align="left" onMouseOver="setPointer(this, '#C8E362')" onMouseOut="setPointer(this, '#FFFFFF')" flag="0" onclick="resetter();this.flag=(this.flag=='0')?'1':'0';this.style.backgroundColor=(flag=='1')?'red':'white';">

Avec la nouvelle fonction resetter():
Code:

1 2 3 4 5 6 7 8 function resetter() { TabTr=document.getElementsByTagName('tr'); for(i=0;TabTr[i];i++){ TabTr[i].backgroundColor='white'; } }
Malheureusement ça ne marche pas...

Merci encore pour votre aide!
16/09/2008, 11h23
SpaceFrog

tu y étais presque ...

backgroundCOlor est une propriété de style ...

Code:

TabTr[i].style.backgroundColor='white';

Merci, ça marche bien à un détail près.... :oops:

J'ai créé un autre tag pour tous les <tr> qu'on ne veut pas toucher (par exemple <tr ... flog="1">), ce qui donne :

Code:

1
2
3
4
5
 
<!-- le tr dont on ne veut pas changer les propriétés -->
<tr></tr>
<!-- les autres tr -->
<tr align="left" onMouseOver="setPointer(this, '#C8E362')" onMouseOut="setPointer(this, '#FFFFFF')" flag="0" flog="1" onclick="resetter();this.flag=(this.flag=='0')?'1':'0';this.style.backgroundColor=(flag=='1')?'#C8E362':'white';">

Les fonctions:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type='text/javascript'>
function setPointer(obj,couleur){
	if(obj.flag=='1'){return false;}
	obj.style.backgroundColor=couleur
	}
function intitr(){
	TabTr=document.getElementsByTagName('tr');
	for(i=0;TabTr[i];i++){
	TabTr[i].flag='0';
	}
	}
	function resetter()
TabTr=document.getElementsByTagName('tr');
	for(i=0;TabTr[i];i++){
	if(TabTr[i].flog=='1'){
	TabTr[i].style.backgroundColor='white';
	}
		}
	
}
</script>

ça marche sour explorer...mais pas sous firefox 8O Argh....il me colorise le premier <tr> en blanc.

16/09/2008, 13h33
SpaceFrog

parceque comme expliqué au dessus il faut initialiser les flogs ...

colle leur plutot un class="flog" si tu ne te sers pas de leur class... et teste le className
16/09/2008, 13h39
crypticcyco
Oui, j'avais essayé de tout réinitialiser dans la première fonction, mais le coup de className marche à merveille :yaisse2:

merci encore

pour info:

Code:

<tr align="left" onMouseOver="setPointer(this, '#C8E362')" onMouseOut="setPointer(this, '#FFFFFF')" flag="0" class="flog" onclick="resetter();this.flag=(this.flag=='0')?'1':'0';this.style.backgroundColor=(flag=='1')?'#C8E362':'white';">
Code:

1 2 3 4 5 6 7 8 function resetter() { TabTr=document.getElementsByTagName('tr'); for(i=0;TabTr[i];i++){ if(TabTr[i].className=='flog'){ TabTr[i].style.backgroundColor='white'; } }