On mouse Over plusieurs cellules

**Nicolas94** · 05/09/2009, 20h21

Bonjour,

Je souhaiterais lors du survol d'une cellule que plusieurs cellules changent de couleur!
Mon code marche pour une cellule :
dans le head

Code :

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

1
2
3
 
td.on { background-color: #ffffff; }
td.off { background-color: green; }

dans le body

Code :

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

1
2
3
4
5
6
7
8
9
 
...
<td style="border:1px solid black;" class="off" onmouseover="className='on';" onmouseout="className='off';">
			<img style="height:60px;width:60px" src="images/pieces/img.gif" alt="B8" />
		</td>
		<td style="border:1px solid black;">
			<img style="height:60px;width:60px" src="images/pieces/img.gif" alt="B8" />
		</td>
...

J'aimerais que lorsque je passe la souris sur le 1er td, les deux td changent de couleur

Merci de m'aiguiller.

Cordialement;
Nico.

**hakurou** · 05/09/2009, 21h49

salut,

Il y a un truc, je ne sais pas si c'est bien mais ca marche, colle tes class et onmouse sur le TR, adapte ton style en remplacant TD par TR et voila.

comme ca :

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
 
<style>
tr.on { background-color: #ffffff; }
tr.off { background-color: green; }
</style>
 
<table>
	<tr class="off" onmouseover="className='on';" onmouseout="className='off';">
		<td style="border:1px solid black;" >
			<img style="height:60px;width:60px" src="images/pieces/img.gif" alt="B8" />
		</td>
		<td style="border:1px solid black;">
			<img style="height:60px;width:60px" src="images/pieces/img.gif" alt="B8" />
		</td>
	</tr>
</table>

**Nicolas94** · 05/09/2009, 22h18

Ce n'est pas exactement ce que je souhaite.
En fait c'est un exemple light que j'ai donné. Par la suite je compte changer la couleur de fond sur plusieurs td que je choisirais.
Merci.

**emmanuel.remy** · 06/09/2009, 11h13

Salut,

A mon avis l'emplacement de tes événements dépend de ce que tu veux faire: le plus ouvert est de poser les événements sur la table, de récupérer la cellule survolée et de prendre ensuite une décision. Mais tu peux aussi rester au niveau de la ligne:

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
29
30
31
32
33
34
<html>
  <head>
    <style type="text/css">
     .on { background-color: #ffffff; }
     .off { background-color: green; }
    </style>
    <script type="text/javascript">
    function doMO(td,cls) {
      //gérons en même temp arbitraiement la... troisième cellule
      td3 = td.parentNode.cells[2]; 
      td.className=td3.className = cls;
    }
    </script>
  </head>
  <body>
    <table border="1" >
     <tr>
      <td class="off" onmouseover="doMO(this,'on');" onmouseout="doMO(this,'off');">Cellule 1.1</td>
      <td>Cellule 1.2</td>
      <td>Cellule 1.3</td>
     </tr>
     <tr>
      <td class="off" onmouseover="doMO(this,'on');" onmouseout="doMO(this,'off');">Cellule 2.1</td>
      <td>Cellule 2.2</td>
      <td>Cellule 2.3</td>
     </tr>
     <tr>
      <td class="off" onmouseover="doMO(this,'on');" onmouseout="doMO(this,'off');">Cellule 3.1</td>
      <td>Cellule 3.2</td>
      <td>Cellule 3.3</td>
     </tr>
    </table>
  </body>
</html>

ERE

**DiDieuh** · 07/09/2009, 11h19

Sinon tu ajoutes ton event sur ta row direct si tu souhaites quelquechose sur toutes tes td d'une meme ligne.

**Nicolas94** · 07/09/2009, 12h17

Bonjour,

Merci beaucoup emmanuel.remy de ces informations.
Je pense pouvoir m'en sortir avec ce code. Il ne reste plus qu'a adapter à mon cas.

Est - possible au survol de la cellule 1.1 que la cellule 3.3 change de couleur ?

Cordialement,
Nico.

**emmanuel.remy** · 07/09/2009, 13h19

Salut,

Envoyé par Nicolas94

Bonjour,

Merci beaucoup emmanuel.remy de ces informations.
Je pense pouvoir m'en sortir avec ce code. Il ne reste plus qu'a adapter à mon cas.

Est - possible au survol de la cellule 1.1 que la cellule 3.3 change de couleur ?

Cordialement,

Nico.

Par exemple quelque chose comme:

Code :

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

1
2
3
4
5
6
7
 
    function doMO(td,cls) {
      if (td.cellIndex==0 && td.parentNode.rowIndex==0) {       
           td3_3 = td.parentNode.parentNode.rows[2].cells[2]; 
            td.className=td3_3.className = cls;
      }
    }

ERE

**Nicolas94** · 07/09/2009, 20h10

Bonsoir,

Merci beaucoup pour ce complément d'information.
Je vais abuser de vos connaissances en javascript sur un dernier point.

Pouvons nous via le survol de la cellule1.1 changer la couleur de plusieurs cellules, comme par exemple 2.2 et 3.3

**emmanuel.remy** · 07/09/2009, 20h53

Re,

Envoyé par Nicolas94

Bonsoir,

Merci beaucoup pour ce complément d'information.
Je vais abuser de vos connaissances en javascript sur un dernier point.

Pouvons nous via le survol de la cellule1.1 changer la couleur de plusieurs cellules, comme par exemple 2.2 et 3.3

Il suffit d'adapter à plusieurs cellules...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function doMO(td,cls) {
      if (td.cellIndex==0 && td.parentNode.rowIndex==0) {       
           var td3_3 = td.parentNode.parentNode.rows[2].cells[2]; 
            td.className=td3_3.className = cls;
 
           //pour changer un peu ...
           var td2_2 = td.parentNode.parentNode.rows[1].cells[1];
           td2_2.style.backgroundColor="Yellow";
 
      }
    }

Juste pour repréciser, tout cela n'est que démonstration, il faut ensuite adapter, optimiser etc...

Bon dev,

ERE

**Nicolas94** · 07/09/2009, 21h17

Merci beaucoup pour toutes ces infos.
Je clôture le post.

**SpaceFrog** · 08/09/2009, 09h00

Perso depuis que j'ai decouvert hover:whatever je ne m'embarasse plus des onmouseover et onmouseout...

**DiDieuh** · 08/09/2009, 10h39

IE n'a - t-il pas du mal avec hover ?

**emmanuel.remy** · 08/09/2009, 10h40

@SpaceFrog: depuis que j'ai découvert ton message je m'embêterai beaucoup moins

et cela m'inspire pas mal.. Mais reste toujours le souci quand tu as besoin d'effectuer un traitement "complexe" (si .... alors) .

ERE

**SpaceFrog** · 08/09/2009, 10h59

oui le whatever:hover permet principalement de rendre le hover sur tout objet crossbrowser et accessoirement aussi d'aplanir les souci d'heritage des sous elements d'id ...
Cela permet de réaliser le hover classique css et non le rollover conditionnel js

**DiDieuh** · 08/09/2009, 11h10

Tant que l'on est dans la discussion, tu aurais un lien pour approfondir tout ça ? Merci d'avance

**SpaceFrog** · 08/09/2009, 12h02

http://lmgtfy.com/?q=whatever%3Ahover

**DiDieuh** · 08/09/2009, 13h52

ça au moins c'est fais XD J'adore ce bashage avec google j'avais jamais vu

.
Si je te posais la question s'était si t'avais un bon sous la main, sinon je vais m'en trouver un ya pas de soucis. Merci :p

**SpaceFrog** · 08/09/2009, 14h36

:grin:

pas un bon lien, LE lien vers le site de l'auteur... le premier dans google

**DiDieuh** · 08/09/2009, 14h51

Ok je suis passé dessus, j'avais rapidement survolé déjà l'idée, si elle est si bien exploitable je pense que je vais me pencher plus souvent dessus aussi

Merci de l'infos

On mouse Over plusieurs cellules

JavaScript

Discussions similaires

Partager

Partager