Changer le background color d'une ligne de tableau au passage de la souris

**nouida** · 30/07/2008, 10h24

Bonjour à tous
J aimerais savoir comment faire pour que une fois je passe la souris sur une ligne d'un tableau, la couleur de fond de celle ci change.
Mercii!

**SweetLeaf** · 30/07/2008, 10h39

tu peut mettre un evenement onMouseOver et onMouseOut dans ton <tr> :

Code :

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

<tr onMouseOver="this.bgColor=\'une_couleur\';" onMouseOut="this.bgColor=\'une_autre_couleur\';" >

Invité · 30/07/2008, 11h02

Salut,

Comme cela c'est plus propre !

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
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
 
<table >
  <tr onmouseover="this.style.backgroundColor = 'red'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr onmouseover="this.style.backgroundColor = 'green'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr onmouseover="this.style.backgroundColor = 'yellow'" onmouseout="this.style.backgroundColor = ''">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>
 
</body>
</html>

Et c'est valide XHTML 1.0 strict

A+

**riete** · 30/07/2008, 11h12

Je ne sais pas si cela fonctionne avec la balise <table>, mais en tout cas cela fonctionne avec <td> et <tr>.

Code :

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

<td class="tdblue" onmouseover="Change_BG(this):">blabla</td>

Le Javascript

Code :

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

1
2
3
function Change_BG(obj){
	obj.className = "tdorange";
}

CSS:

Code :

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

1
2
3
4
5
6
7
8
.tdorange
{
	background: orange;
}
.tdblue
{
	background: blue;
}

**SweetLeaf** · 30/07/2008, 11h38

ne pas oublier le tag

!!

**nouida** · 30/07/2008, 11h44

Merci pour vos reponses!
mais j ai une petite question, j aimerais que une fois que je passe la souris sur la cellule, que le curseur "main" s affiche indiquant que c est un lien. J ai essayé de mettre le td dans un <a href="" style="cursor:hand"> mais ca marche pas, d ailleurs je doute que cursor:hand existe....

**SweetLeaf** · 30/07/2008, 11h50

euh je suis pas sur mais essaye avec ca :

Code :

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

style="cursor: pointer;"

**Auteur** · 30/07/2008, 12h19

Envoyé par riete

Je ne sais pas si cela fonctionne avec la balise <table>, mais en tout cas cela fonctionne avec <td> et <tr>.

Code :

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

<td class="tdblue" onmouseover="Change_BG(this):">blabla</td>

Le Javascript

Code :

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

1
2
3
function Change_BG(obj){
	obj.className = "tdorange";
}

CSS:

Code :

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

1
2
3
4
5
6
7
8
.tdorange
{
	background: orange;
}
.tdblue
{
	background: blue;
}

C'est une solution effectivement

L'avantage est que si tu souhaites modifier la couleur tu vas simplement dans la feuille de style.
Seule chose : tu as oublié de gérer le onmouseout() pour que la ligne retrouve sa couleur initiale

Envoyé par SweetLeaf

euh je suis pas sur mais essaye avec ca :

Code :

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

style="cursor: pointer;"

C'est ça

**riete** · 30/07/2008, 14h31

Envoyé par Auteur

C'est une solution effectivement

L'avantage est que si tu souhaites modifier la couleur tu vas simplement dans la feuille de style.
Seule chose : tu as oublié de gérer le onmouseout() pour que la ligne retrouve sa couleur initiale

On pourrait dire que j'ai oublié volontairement

. Mais sens vouloir jouer le vieux prof en manque de pédagogie (surtout que je ne suis pas prof

), je pense que d'un point de vue pédagogique c'était pas mal de laisser le plaisir à Nouida de trouver cela lui(elle) même

. Tu ne crois pas ?