[HTML,JS] Surligner des lignes au passage de la souris

Surligner des lignes au passage de la souris [HTML,JS] - HTML/CSS - Programmation

Marsh Posté le 23-07-2002 à 11:28:01    

salut !
 
j'ai un tableau des plusieurs lignes
 
au passage de la souris je surligne la ligne ou la souris passe pour la faire ressortir
 
juske la tout va bien
 
les lignes du tableau vont deux par deux
 
ce que je voudrais faire c donc de surligner les lignes deux par deux... par exemple si je passe ma souris sur la ligne 1 ou la 2, ca surligne a la fois la 1 et la 2. si je passe sur la 3 ou la 4, ca surligne a la fois la 3 et la 4.
 
mais je vois po comment faire :/
 
edit: je v mettre des captures pour mieux comprendre
 
la c le tableau de base sans rien
http://dakikoune.net/rollover/etap0.png
 
quand je passe la souris sur la ligne du haut ca la surligne
http://dakikoune.net/rollover/etap1.png
 
idem celle du bas
http://dakikoune.net/rollover/etap2.png
 
moi je voudrais que quand je passe sois sur une du bas ou une du haut ca surligne les deux


Message édité par Kikoune le 23-07-2002 à 14:51:52
Reply

Marsh Posté le 23-07-2002 à 11:28:01   

Reply

Marsh Posté le 23-07-2002 à 11:36:32    

Heu lu ;)
je suis noob dans ce domaine pourrais tu me filer un petit bout de code montrant comment on fait pour ca......
 
Merci d avance :jap:

Reply

Marsh Posté le 23-07-2002 à 11:49:19    

ouaip voici le code :
 

Code :
  1. <TABLE>
  2.   <TR BORDER="0" CLASS="ligne0" onMouseOver="this.className='highlight'" onMouseOut="this.className='ligne0'">
  3. ...
  4.   </TR>
  5.   <TR BORDER="0" CLASS="ligne1" onMouseOver="this.className='highlight'" onMouseOut="this.className='ligne1'">
  6. ...
  7.   </TR>
  8.   <TR BORDER="0" CLASS="ligne0" onMouseOver="this.className='highlight'" onMouseOut="this.className='ligne0'">
  9. ...
  10.   </TR>
  11.   <TR BORDER="0" CLASS="ligne1" onMouseOver="this.className='highlight'" onMouseOut="this.className='ligne1'">
  12. ...
  13.   </TR>
  14.   <TR BORDER="0" CLASS="ligne0" onMouseOver="this.className='highlight'" onMouseOut="this.className='ligne0'">
  15. ...
  16.   </TR>
  17. </TABLE>
  18. avec les classes ligne0, ligne1 et highlight
  19. .ligne0
  20. {
  21. background-color: ffffff
  22. }
  23. .ligne1
  24. {
  25. background-color: D8D8D8
  26. }
  27. .highlight
  28. {
  29. background-color: B1F1C5
  30. }


 
donc la ca marche 1 par 1 les lignes
 
je voudrais que ca marche 2 par 2...

Reply

Marsh Posté le 23-07-2002 à 14:40:33    

bon je v detailler un peu...
 
la c le tableau de base sans rien
http://dakikoune.net/rollover/etap0.png
 
quand je passe la souris sur la ligne du haut ca la surligne
http://dakikoune.net/rollover/etap1.png
 
idem celle du bas
http://dakikoune.net/rollover/etap2.png
 
moi je voudrais que quand je passe sois sur une du bas ou une du haut ca surligne les deux

Reply

Marsh Posté le 23-07-2002 à 15:22:25    

pkoi tu ne mets pas tes deux lignes en kestion dans une seule et même  TR  composée d'un tableau à deux lignes....comme ça tu joueras sur la couleur de fond de cette TR ki agira sur le tableau composé de tes 2 nouvelles lignes  
 
 
ex :  

Code :
  1. <table>
  2.   <tr BORDER="0" CLASS="ligne0" onMouseOver="this.className='highlight'" onMouseOut="this.className='ligne0'">
  3.       <table>
  4.         <tr>......</tr>
  5.         <tr>......</tr>
  6.       </table>
  7.   </tr>
  8.   <tr BORDER="0" CLASS="ligne0" onMouseOver="this.className='highlight'" onMouseOut="this.className='ligne0'">
  9.       <table>
  10.         <tr>......</tr>
  11.         <tr>......</tr>
  12.       </table>
  13.   </tr>
  14. </table>


 
essaye toujours mais ça doit marcher


Message édité par gwen2709 le 23-07-2002 à 15:27:48
Reply

Marsh Posté le 23-07-2002 à 15:31:08    

je suis pas sûr de piger ton code html ... enfin, pour toute balise tu as donc className pour le nom de sa classe css, nextSibling pour son prochain frère dans la hiérarchie, previousSibling pour son frère précédent.
 
eg
 
table
  |_tr1
  |_tr2
 
tr1.nextSibling == tr2,
tr2.previousSibling == tr1
 
donc pour 'surbriller' tr2 lors du hover de tr1, tu rajoute "this.nextSibling.className = 'laclassecss'"

Reply

Marsh Posté le 23-07-2002 à 15:45:42    

youdontcare : yalah t un dieu je te venere pour quinze generation :) c trop fort ca :) merci bocoup
 
gwen : merci kan meme ;) mais ca ne fonctionne pas, j'ai essayé et ca change bien le couleur de la ligne globale, mais le prolbème c que les lignes interne on des couleurs de fonds qui passe par dessus donc cela ne donne pas l'effet escompté

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed