Changer de couleur des <tr> au passage de la souris

**sebac** · 24/06/2009, 12h09

Bonjour, j'ai un code du style

Code :

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

1
2
3
4
<tr >
<td >Titi</td>
<td >Tata</td>
</tr>

je voudrais que lors du passage de la souris, j'ai la couleur de fond de tata et titi qui change en même temps. mon css est

Code :

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

1
2
3
4
 TD.survol:hover{
	background-color: #FF6600 ;
	/*text-decoration: underline ;*/
	}

et mon html

Code :

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

1
2
3
4
<tr >
<td class=survol>Titi</td>
<td class=survol>Tata</td>
</tr>

mais ce code change juste la couleur de Titi et Tata séparément hors je voudrais que lorsque ma souris est sur tata ou titi que toutes la ligne change de couleur de fond.
Quand j'écris

Code :

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

1
2
3
4
 TR.survol:hover{
	background-color: #FF6600 ;
	/*text-decoration: underline ;*/
	}

Code :

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

1
2
3
4
<tr class=survol>
<td >Titi</td>
<td >Tata</td>
</tr>

rien ne se passe.

**radagast35** · 24/06/2009, 12h39

Salut,
Essaye ça :

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
 <style type="text/css">
	table {border-spacing:0px 10px;}
	tr:hover{background-color:red;}
</style>
</head>
 
<body>
<table>
	<tr>
		<td >Titi</td>
		<td >Tata</td>
	</tr>
</table>
</body>
</html>

**Macmillenium** · 24/06/2009, 13h59

Bonjour,

Rajoute un border-collapse:collapse; sur ton table.

Pourtant la solution a déjà été proposée.

**sebac** · 24/06/2009, 14h02

en fait je ne veux pas mélanger le css et le html mais avoir deux fichiers distinct comme actuellement ce qui fait que ce que tu m'a passé est exactement ce que j'ai déjà avec la balise tr sauf que tu as rajouté table mais ça ne change pas grand chose à mon problème, je continue de chercher de mon côté

**sebac** · 24/06/2009, 14h33

justement Macmillenium j'avais bien vu que s'était la solution mais j'ai du mal à mettre en relation le code js et le css et le html surtout que dans le code js que tu m'avais déjà passé je ne comprend pas comment tu arrives à faire un for hors d'une fonction

Code :

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

1
2
3
4
5
6
7
8
 
var MesBeauxTr = document.getElementById('ConteneurTr').getElementsByTagName('tr');
 
	for (var i=0;i<MesBeauxTr.length;i++)
	{
		MesBeauxTr[i].onmouseover = SurvolerTr;
		MesBeauxTr[i].onmouseout = QuitterTr;
	}

à moins que ça puisse se faire en js dont je suis novice

**Macmillenium** · 24/06/2009, 15h02

Code javascript :

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
 
function hoverTr() {
 
var MesBeauxTr = document.getElementById('ConteneurTr').getElementsByTagName('tr');
 
	for (var i=0;i<MesBeauxTr.length;i++)
	{
		MesBeauxTr[i].onmouseover = SurvolerTr;
		MesBeauxTr[i].onmouseout = QuitterTr;
	}
 
	function SurvolerTr() {
		if (document.all) {
			this.style.cssText ='background-color:#900;'
		}
		else {
			this.setAttribute('style', 'background-color:#900')
		}
	}
 
	function QuitterTr() {
		if (document.all) {
			this.style.cssText ='background-color:<?php echo $BGCOLOR ?>;'
		}
		else {
			this.setAttribute('style', 'background-color:<?php echo $BGCOLOR ?>')
		}
	}
 }

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13

...
<body onload="hoverTr()">
...


<table id="ConteneurTr">
  <tr>
      <td>Titi</td>
      <td>Tata</td>
  </tr>
<table>

C'est tout

**radagast35** · 24/06/2009, 15h06

CSS:

Code :

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

1
2
3
table {border-spacing:0px 10px;}
tr.survolRed:hover{background-color:red;}
tr.survolGreen:hover{background-color:green;}

Le border collapse n'est pas obligatoire car j'ai mis le border-spacing (ici juste horizontal) à 0;

HTML:

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
 
<table>
  <tr class="survolRed">
	<td >Titi</td>
	<td >Tata</td>
  </tr>
  <tr class="survolGreen">
	<td >toto</td>
	<td >tete</td>
  </tr>
  <tr class="survolRed">
	<td >tutu</td>
	<td >tyty</td>
  </tr>
</table>

De cette maniere, au survol d'un element, toute la ligne est changée.
Est ce bien ce que tu veux?

**Macmillenium** · 24/06/2009, 15h14

Envoyé par radagast35

Le border collapse n'est pas obligatoire car j'ai mis le border-spacing (ici juste horizontal) à 0;

border-spacing ne fonctionne pas sous IE7 et versions inférieures, d'où l'intérêt d'utiliser border-collapse + padding sur les <td>.

Il ne faut pas oublier de préciser que :hover ne fonctionne que sur les éléments <a> sous IE6 et versions inférieures => passage obligatoire par le JS dans ce cas.

**radagast35** · 24/06/2009, 15h21

Pardon pardon je suis d'accord avec...

j'ai souvent trop tendance à penser firefox...

merci Macmillenium

**sebac** · 24/06/2009, 15h54

je crois que je vais opté pour la solution de radagast35 parce que j'essaye celle de Macmillenium mais ça ne me donne rien simplement radagast35 quel modification il faudrait faire dans le code que tu m'as passé pour tenir en compte la remarque que Macmillenium à faite concernant e border-spacing

**radagast35** · 24/06/2009, 16h17

le border-spacing:0px; n'est optimisé pour IE donc a la place pour que les cellules d'un tableau aient leur bordure commune, tu ecris dans le css du tableau :

Code :

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

border-collapse:collapse;

Sinon pour optimiser ton code, tu utilises tes evennement JS en effectuant un changement de class :

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
 
tabTr = document.getElementsByTagName('tr');
 
for(var i = 0; i < tabTr.length; ++i)
{	
     tabTr[i].onmouseover = function()
    {
	tabTr[i].className = "survolRed";
      }//onmouseover
 
     tabTr[i].onmouseout = function()
    {
	tabTr[i].className = "";
      }//onmouseout 
}//for

Après tu fais ta sauce en délimitant les couleurs pour certaines classes, etc...

**sebac** · 24/06/2009, 17h54

j'ai du mal à intégré le code que radagast35 m'a donné, voici mon code qui ne marche qu'avec firefox et non IE: CSS

Code :

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

1
2
3
4
5
6
7
tr.survolOrange:hover{background-color:#FF6600;}
 
 
	 TR.fondPardefautColor{
	background-color: #d6deec ;
	/*text-decoration: underline ;*/
	}

et le html est

Code :

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

1
2
3
4
5
6
<table>
  <tr class="survolOrange fondPardefautColor">
	<td >Titi</td>
	<td >Tata</td>
  </tr>
</table>

**pop_up** · 24/06/2009, 17h59

Je cite Macmillenium

Il ne faut pas oublier de préciser que :hover ne fonctionne que sur les éléments <a> sous IE6 et versions inférieures => passage obligatoire par le JS dans ce cas.

**radagast35** · 24/06/2009, 18h49

Comme le dit pop_up, ton code n'est a présent pas optimisé pour IE.
Pour cela tu dois passer par du javascript.
Je t'es donc proposé un code en javascript avec d'effectuer ton survol.
Explications :

On recupere toutes les balises "tr" de la page et on les stocke dans le tableau tabTr.

Code :

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

tabTr = document.getElementsByTagName('tr');

Ceci fait, on ajoute deux evennements (un de contact, onmouseover et un de separation, onmouseout) pour simuler un survol.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
for(var i = 0; i < tabTr.length; ++i)
{	
     tabTr[i].onmouseover = function()
    {
	tabTr[i].className = "survolRed";
      }//onmouseover
 
     tabTr[i].onmouseout = function()
    {
	tabTr[i].className = "";
      }//onmouseout 
}//for

L'attribut className permet d'accéder aux classes d'une balise.
Ainsi ici, je dis:
*Lorsque la souris rentre en contact avec un tr, cette balise reçoit:class="survolRed"

*Lorsque la souris ne touche plus la balise alors on lui enleve cette classe

Il ne reste plus qu'a definir l'etat des element de la classe CSS "survolRed".
Ici notammment,

Code :

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

#survolRed {background-color:red;}

ATTENTION::className contient toutes les classes de la balise sous forme d'une string (separateur, l'espace).
class="tata toto titi" ==> la mise en page de la balise depend alors des classes CSS: .tata, .toto, .titi

Il ne faut donc pas oublier de les garder dans les evennements!

**sebac** · 24/06/2009, 20h34

ok merci je vais voir ça demain mais mon autre problème est de savoir comment dois-je appelé cette fonction js dans mon html?

**Macmillenium** · 24/06/2009, 22h48

Envoyé par radagast35

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
for(var i = 0; i < tabTr.length; ++i)
{	
     tabTr[i].onmouseover = function()
    {
	tabTr[i].className = "survolRed";
      }//onmouseover
 
     tabTr[i].onmouseout = function()
    {
	tabTr[i].className = "";
      }//onmouseout 
}//for

Comme tu le dis :

Envoyé par radagast35

On recupere toutes les balises "tr" de la page et on les stocke dans le tableau tabTr.

Ensuite, il faut déclencher la fonction dans l'évènement onmouseover/onmouseout du tr sur lequel on se trouve, ce qui donne :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
for(var i = 0; i < tabTr.length; ++i)
{	
     tabTr[i].onmouseover = function()
    {
	this.className = "survolRed";
      }//onmouseover
 
     tabTr[i].onmouseout = function()
    {
	this.className = "";
      }//onmouseout 
}//for

Cependant, pour une meilleure lisibilité du code, il est préférable d'externaliser les fonctions et les appelées lors des évènements.

Envoyé par radagast35

ATTENTION::className contient toutes les classes de la balise sous forme d'une string (separateur, l'espace).
class="tata toto titi" ==> la mise en page de la balise depend alors des classes CSS: .tata, .toto, .titi

Il ne faut donc pas oublier de les garder dans les evennements!

Pour ce genre d'effets interactifs, personnellement, je conseillerai d'éviter de toucher à l'attribut class afin de ne pas perdre le style en cas de JS désactivé, et de passer plutôt par l'attribut style via setAttribute (construction de l'attribut dans le onmouseover et destruction dans le onmouseout), mais chaque un sa méthode

Envoyé par radagast35

Code :

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

1
2
 
#survolRed {background-color:red;}

Là tu fais référence à une id et non pas une classe

Pour continuer dans ton idée, à adapter par sebac :

Code xhtml :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
        table { border-collapse:collapse; }
        tr { background-color:blue; }
        .survolRed {background-color:red;}
</style>
 
 
<script type="text/javascript">
function hoverTr() {
        var tabTr = document.getElementsByTagName('tr');
         
        for(var i = 0; i < tabTr.length; i++) {
                tabTr[i].onmouseover = survolerTr; //onmouseover
                tabTr[i].onmouseout = QuitterTr; //onmouseout 
        }//for
 
        function survolerTr() {
                this.className = 'survolRed';
        }//onmouseover
 
        function QuitterTr() {
                this.className = '';
        }//onmouseout
}
</script>
 
<body onload="hoverTr()">
 
	<table>
		<tr>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
		</tr>
		<tr>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
		</tr>
		<tr>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
		</tr>
		<tr>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
		</tr>
	</table>
 
</body>
 
</html>

**radagast35** · 25/06/2009, 10h37

Merci pour la relecture

Et il est vrai qu'il vaut mieux utiliser le changement de style pour des modifs simple alors que le changement de classe permet de définir a l'avance dans le CSS des mise en page d'états "complexes".
exemple un joli bouton en CSS avec pleins de paramètres d'affichage, tu définis tes classes out, over et clic et la tu y gagnes!

J'avoue que pour changer un background y a pas besoin^^

**sebac** · 25/06/2009, 14h13

Merci à tous ceux qui ont participé à cette discussion la solution est celle de Macmillenium par contre je rajoute juste un filtre dans le cas où on aurait plusieurs table et qu'on ne voudrait pas avoir un changement de couleur sur tous les tableaux. Dans cet exemple je ne change pas de couleur quand j'ai un tr de class vert, après on peut toujours adapté le code comme on veut

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
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	table { border-collapse:collapse; }
	tr { background-color:blue; }
	tr.vert { background-color:green; }
	.survolRed {background-color:red;}
</style>
 
 
<script type="text/javascript">
function hoverTr() {
	var tabTr = document.getElementsByTagName('tr'); // récupération de tous les tr
 
	for(var i = 0; i < tabTr.length; i++) {
	if(tabTr[i].className != 'vert')// filtre sur les tr donc seule celle dont le className != 'vert' changerons de couleur au passage de la souris
	  {
		tabTr[i].onmouseover = survolerTr; //onmouseover
		tabTr[i].onmouseout = QuitterTr; //onmouseout 
	  }	
	}//for
 
	function survolerTr() {
		this.className = 'survolRed';
	}//onmouseover
 
	function QuitterTr() {
		this.className = '';
	}//onmouseout
}
</script>
 
<body onload="hoverTr()">
 
 
 
 
 <table>
		<tr class=vert>
			<td>texto</td>
			<td>texto</td>
			<td>texto</td>
			<td>texto</td>
		</tr>
		<tr class=vert>
			<td>texte</td>
			<td>texte</td>
			<td>texte</td>
			<td>texte</td>
		</tr>
		<tr class=vert>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
		</tr>
 
	</table>
 
	<table>
		<tr>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
		</tr>
		<tr>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
		</tr>
		<tr>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
		</tr>
		<tr>
			<td>text</td>
			<td>text</td>
			<td>text</td>
			<td>text</td>
		</tr>
	</table>
 
</body>
 
</html>

Changer de couleur des <tr> au passage de la souris

CSS

Discussions similaires

Partager

Partager