On mouse Over plusieurs cellules

Version imprimable

[Résolu] On mouse Over plusieurs cellules

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:

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

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.

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:

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>

05/09/2009, 22h18
Nicolas94

^^

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.

Piste et exemple

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:

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

07/09/2009, 11h19
DiDieuh

Sinon tu ajoutes ton event sur ta row direct si tu souhaites quelquechose sur toutes tes td d'une meme ligne.
07/09/2009, 12h17
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.

Salut,

Citation:

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:

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

07/09/2009, 20h10
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

Re,

Citation:

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:

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

07/09/2009, 21h17
Nicolas94

^^

Merci beaucoup pour toutes ces infos.
Je clôture le post.
08/09/2009, 09h00
SpaceFrog

Perso depuis que j'ai decouvert hover:whatever je ne m'embarasse plus des onmouseover et onmouseout...
08/09/2009, 10h39
DiDieuh

IE n'a - t-il pas du mal avec hover ?
08/09/2009, 10h40
emmanuel.remy

@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
08/09/2009, 10h59
SpaceFrog

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
08/09/2009, 11h10
DiDieuh

Tant que l'on est dans la discussion, tu aurais un lien pour approfondir tout ça ? Merci d'avance :ccool:
08/09/2009, 12h02
SpaceFrog

:mouarf::mouarf:

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

;)
08/09/2009, 13h52
DiDieuh

ça au moins c'est fais XD J'adore ce bashage avec google j'avais jamais vu :mouarf:.
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
08/09/2009, 14h36
SpaceFrog

:grin:

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

:ccool:
08/09/2009, 14h51
DiDieuh

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:ccool: