Discussion :

[jcaspar]

Bonjour à tous !

Je souhaiterais utiliser un javascript qui permettent la fonctionnalité suivante:
lorsque l'on passe au dessus d'un élement d'un tableau de données
de x lignes chaque passage avec la souris sur une ligne change la couleur de celle ci...

Pouvez vous m'indiquer svp comment procéder ?

En vous remerciant par avance pour vos explications !

Jean Marc

[m312]

Je dirais rajouter une fonction javascript

Code :

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

1
2
3
4
 
function change_color(objet,couleur) {
objet.bgColor = couleur;
}

et faire ton tableau de la forme

Code :

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

1
2
3
4
5
6
 
<table>
<tr onmouseover="change_color(this,'#777777');">
<td>Data</td>
</tr>
</table>

ou bien entendu #777777 est n'importe quelle autre couleur.
Pour que ca revienne normal, il faudra rajouter un onmouseout="change_color(this,'none');"

Mais bon, peut etre pas besoin de faire tout ca pour ca ....

Juste ce que j'aurai fait

[bigboomshakala]

je suis d'accord à ceci près que je préfère séparer le javascript du HTML quand c'est possible :

Code :

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

1
2
3
4
<table id='toto'>
<tr>...</tr>
...
</table>

et dans le onload du body, appeler initTableEvents();

Code :

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

1
2
3
4
5
6
7
8
9
function initTableEvents()
{
  var lignes = document.getElementById('toto').getElementsByName('tr');
  for (var i=0; i<lignes.length; i++)
 {
   lignes[i].onmouseover = function() {/*changement de la couleur*/};
   lignes[i].onmouseout = function() {/*rétablissement de la couleur*/};
 }
}

[m312]

je suis d'accord à ceci près que je préfère séparer le javascript du HTML quand c'est possible :

Apres, c'est une question de gouts

[bigboomshakala]

Apres, c'est une question de gouts

c'est aussi une question de modularité. en séparant les événements du code HTML on peut les modifier facilement. ici il suffit d'agir sur une courte fonction javascript pour changer le comportement de la table. c'est plus simple surtout si la table est grande (20 lignes = 20 onmouseover et onmouseout à insérer dans le HTML. et le jour où il faut changer...)