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