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

Version imprimable

30/07/2008, 10h24
nouida

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

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!
30/07/2008, 10h39
SweetLeaf

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

Code:

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

Salut,

Comme cela c'est plus propre !

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
<!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+

30/07/2008, 11h12
riete
Je ne sais pas si cela fonctionne avec la balise <table>, mais en tout cas cela fonctionne avec <td> et <tr>.

Code:

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

Le Javascript
Code:

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

1 2 3 4 5 6 7 8 .tdorange { background: orange; } .tdblue { background: blue; }
30/07/2008, 11h38
SweetLeaf

ne pas oublier le tag :resolu: !! ;)
30/07/2008, 11h44
nouida

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....
30/07/2008, 11h50
SweetLeaf

euh je suis pas sur mais essaye avec ca :

Code:

style="cursor: pointer;"
30/07/2008, 12h19
Auteur
Citation:
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:

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

Le Javascript

Code:

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

CSS:

Code:

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 ;)

Citation:

Envoyé par SweetLeaf

euh je suis pas sur mais essaye avec ca :

Code:

style="cursor: pointer;"

C'est ça ;)
30/07/2008, 14h31
riete

Citation:

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 :roll:. Mais sens vouloir jouer le vieux prof en manque de pédagogie (surtout que je ne suis pas prof :lol: ), 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 ?
30/07/2008, 15h01
Invité

Ah! Ah!

Voir post #3

:yaisse2:
30/07/2008, 15h08
SweetLeaf

lol !! Prend pas trop la grosse tête !!! :mrgreen: