Fusion de 2 scripts pour une fonction précise

Fusion de 2 scripts pour une fonction précise - HTML/CSS - Programmation

Marsh Posté le 24-07-2007 à 11:58:22    

Bonjour,
 
Voici 2 scripts qui fonctionnent indépendamment l'un de l'autre; je cherche à les associer.
Le premier script permet de récupérer une touche du clavier (au choix) et le deuxième script permet de mettre en surbrillance une ligne du tableau ci-dessous au passage de la souris.
 
Mon but serait que chaque ligne du tableau se mettent et restent en surbrillance une par une à chaque fois que j'appuie sur une touche du clavier.  
 
 

Code :
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <STYLE>
  5.   .tabnormal{background-color:white; color:navy; font-weight:bold}
  6.   .tabover{background-color:green; color:white; font-weight:bold}
  7. </STYLE>
  9. <title>Document sans nom</title>
  10. </head>
  11. <body>
  12. <p>&nbsp;</p>
  14. <script language="JavaScript">
  15. document.onkeypress = checkKeycode;
  16. function checkKeycode(event) {
  17. var key;
  18. if (event.keyCode) key = event.keyCode;
  19. else key = event.which;
  20. alert("Vous venez de frapper la lettre : " + key);
  23. if(key == 32) { // 13 = enter     32 = spacebarre
  24.   parent.window.location = './identz.html';
  25. }
  28. }
  29. // var lettre= String.fromCharCode(event.keyCode);
  30. </script>
  31. <table width="365" border="1" cellpadding="3" cellspacing="0" style="border-width:1px;border-style:solid;border-color:navy">
  33.   <tr class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">
  34.     <td width="264"> Ligne 1</td>
  35.   </tr>  <tr class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">
  36.     <td> Ligne 2</td>  </tr>
  37.   <tr class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">
  38.     <td> Ligne 3</td>  </tr>
  39. </table>
  40. <p>&nbsp;</p>
  41. </body>


 
 
Il faut donc que j'enlève chaque "onmouseover" et "onmouseout" mais comment les remplacer ?  
Il y a certainement une solution mais je débute en JavaScript.
 
Merci
odo

Reply

Marsh Posté le 24-07-2007 à 11:58:22   

Reply

Marsh Posté le 24-07-2007 à 12:00:56    

erratum : Je sais que la ligne 24 est incohérente; puisque c'est certainement à cet endroit qu'il faut modifier la couleur d'une ligne de tableau; mais comment ?  :)

Reply

Marsh Posté le 24-07-2007 à 12:03:52    

Oula, typiquement pour un tableau faut séparer les couches.
 
Tu vires les triggers d'event dans le code, et tu passes par une fonction style addEvent() @ le site Dean Edwards.
 
Après t'auras un truc genre (je vais pas te taper le code, juste la logique)
 
-Tu récupères les lignes de ton tableau;
-A chaque frappe de touche tu colores, par exemple la ligne 0 et t'avance le pointer d'un point.
-Encore une touche ligne 1, ect...


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 24-07-2007 à 14:29:56    

Euh, j'ai pas tout compris, (voir moins que ça).  
je continue à comprendre en cherchant sous google "triggers ", "addEvent()".
 
y a des pointer en javascript ?
 
Merci
 
odo

Reply

Marsh Posté le 24-07-2007 à 14:57:40    

Non, pas au sens ou tu l'entends, c'est plus dans l'expression :D
La méthode getElementsByTagName renvoie un pseudo-tableau, du coup tu peux le parcourir en faisant avancer ton "pointer" d'un cran à chaque frappe de touche.


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 24-07-2007 à 16:30:15    

Décidement, je suis trop novice en javascript pour faire ça.
j'ai regardé coté rollover distant. mais ça ne se fait pas au clavier non plus.

Reply

Marsh Posté le 24-07-2007 à 22:19:50    

Shinuza a raison.
 
Mais avant d'appeler la grande cavalerie, gardons la logique.
Si on clique sur la touche ‘espace' tu veux que la ligne reste en surbrillance.
Problème: ou est donc cette ligne?
 
Si on récupère l'endroit ou se trouve cette ligne, le tour est joué!
Je propose de changer ton mouseover.
On récupère à chaque fois sa valeur dans le variable ou.
 
On profite du fait que le mouseover précède toujours le mouseout.
 
Ensuite, si le souris sort: on teste s'il doit devenir normal ou rester fixe

Code :
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  3. <STYLE>
  4. .tabnormal{background-color:white; color:navy; font-weight:bold}
  5. .tabover{background-color:green; color:white; font-weight:bold}
  6. .tabfixe{background-color:green; color:white; font-weight:bold} /* ajouté pour faire
  7. une difference avec tabover*/
  8. </STYLE>
  10. <script language="JavaScript">
  11. var ou=""// faut déclarer <ou> pour qu'il soit valable partout
  12.     document.onkeypress = checkKeycode;
  13.     function checkKeycode(event) {
  14.     var key;
  15.     if (event.keyCode) key = event.keyCode;
  16.     else key = event.which;
  17.     alert("Vous venez de frapper la lettre : " + key );
  18.      if(key == 32) { // 13 = enter     32 = spacebarre
  19.      ou.className="tabfixe"} // si on change avec barre d'espace, ca devient fixe
  20.      }
  22. function garder(){
  23. if ( ou.className!="tabfixe" )  // si ce n'est pas tabfixe
  24. {ou.className="tabnormal"} // on revient à l'affichage normal
  25. }
  27. function oudonc(liste) {
  28. ou=liste // on récupère l'endroit de la ligne
  29. if (ou.className!='tabfixe')  // si ce n'est pas tabfixe
  30. {ou.className='tabover'}  // on change en tabover
  31. }
  32.       </script>
  33.       <title>Document sans nom</title>
  34.       </head>
  35.       <body>
  36.       <p>&nbsp;</p>
  37.       <table width="365" border="1" cellpadding="3" cellspacing="0" style="border-width:1px;border-style:solid;border-color:navy">
  38.       <tr  class="tabnormal" onmouseover="oudonc(this)"  onmouseout="garder()"  >
  39.       <td  name="L1" width="264"> Ligne 1</td>
  40.       </tr>  <tr  name="L2" class="tabnormal" onmouseover="oudonc(this)"  onmouseout="garder()"  >
  41.       <td> Ligne 2</td>  </tr>
  42.       <tr  name="L3" class="tabnormal" onmouseover="oudonc(this)"  onmouseout="garder()"  >
  43.        <td> Ligne 3</td>  </tr>
  44.       </table>
  45.       </body>
  46.       </html>

Reply

Sujets relatifs:

Leave a Replay

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