Discussion :

[sebac]

Bonjour je veux changer la couleur de fond de ma balise tr au passage de la souris voici mon programme php

Code :

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

1
2
3
4
<tr class=listhead bgcolor=BGCOLOR>
<td >Titi</td>
<td >Tata</td>
</tr>

$BGCOLOR est une variable globale qui contient la couleur bleu utilisé à plusieurs endroit dans mon code. Pour changer de couleur j'ai programmer mon fichier css comme ceci

Code :

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

1
2
3
TR.listhead a:hover{
	background-color: #900 ;
	}

lorsque je survole chaque cellulle, la nouvelle couleur apparaît sauf qu'elle ne couvre pas tout l'espace en bleu mais simplement l'arrière plan de Titi et Tata. Comment dois-je faire pour que toute la zone soit couverte? Apparemment selon les différent éléments que j'ai jusqu'ici créer une fonction javascript

[olivierPa]

Bon, tout d'abord, j'imagine que titi et tata sont entre des balises <a>...
sinon, ton css ne fait rien.
dans ce cas, la balise a ne couvrant pas toute la cellule, seuls
les mots titi ou tata vont changer de couleur...
du coup, il vaut mieux pour le css faire

Code :

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

1
2
3
4
 
tr.listhead td:hover{
	background-color: #900 ;
	}

sinon, utilise plutot "style='background-color:'.$BGCOLOR.'";'
dans ton code php pour definir la couleur par defaut...

J'espere que cela repond a ta question.

Olivier.

[FoxLeRenard]

Bonjour je veux changer la couleur de fond de ma balise tr au passage de la souris voici mon programme php

Code :

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

1
2
3
4
 print "<tr class=listhead bgcolor=$BGCOLOR>\n";
  print "<td >Titi</td>\n";
  print "<td >Tata</td>\n";
 print "</tr>\n";

$BGCOLOR est une variable globale qui contient la couleur bleu utilisé à plusieurs endroit dans mon code. Pour changer de couleur j'ai programmer mon fichier css comme ceci

Code :

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

1
2
3
TR.listhead a:hover{
	background-color: #900 ;
	}

lorsque je survole chaque cellulle, la nouvelle couleur apparaît sauf qu'elle ne couvre pas tout l'espace en bleu mais simplement l'arrière plan de Titi et Tata. Comment dois-je faire pour que toute la zone soit couverte? Apparemment selon les différent éléments que j'ai jusqu'ici créer une fonction javascript

Bonjour,

tu avais presque trouvé, juste note ceci
1) TR c' est comme un BR ce ne sont pas des contenants
2) la fonction HOVER n'est pas réservé aux anchor (A) donc toute balise
contenante peut avoir son HOVER
donc sachant cela c'est le TD contenant qui doit avoir la class et ça marchera

Code :

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

1
2
 
td.listhead:hover {background-color:#900;}

Bien sur tu déplace le style sur tous les TD

[Macmillenium]

Bonjour,

lorsque je survole chaque cellulle, la nouvelle couleur apparaît sauf qu'elle ne couvre pas tout l'espace en bleu mais simplement l'arrière plan de Titi et Tata. Comment dois-je faire pour que toute la zone soit couverte? Apparemment selon les différent éléments que j'ai jusqu'ici créer une fonction javascript

Et si tu rajoutes un border-collapse:collapse; sur ton table ?

Code css :

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

1
2
3
4
 
table {
   border-collapse:collapse;
}

Cependant, il faudrait appliquer le style en question dans l'état survolé des <tr> et non pas <a> (que je ne vois pas dans ton code).

Code css :

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

1
2
3
4
 
TR.listhead:hover{
	background-color: #900 ;
}

Malheureusement, cela ne fonctionne pas sous IE6- qui interprète le pseudo-class dynamique :hover uniquement sur l'élément <a>, la solution serait donc de passer par le JavaScript, un exemple vite fait suite à plusieurs demandes sur le forum :

Code html :

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

1
2
3
4
5
6
7
 
<table id="ConteneurTr">
<tr class="listhead">
<td >Titi</td>
<td >Tata</td>
</tr>
</table>

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
 
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 ?>')
		}
	}

Aux puristes du JS, j'ai utilisé document.all pour cibler uniquement IE7- qui n'interprète pas correctement le setAttribute.

[sebac]

Merci à tous ceux qui ont participé à cette discution, la solution dans ce cas est celle proposée par FoxLeRenard.