Discussion :

[copinou]

Bonjour,

Je suis très débutant dans la programmation, mais je me lance dans la confection d'une page pour héberger une BD que je fais. Je suis assez content du résultat, mais j'ai quelques problèmes que je n'arrive pas à régler.

Voici le site en question: http://corentinpenloup.com/tekno.html (c'est un lien privé )

j'aimerais pouvoir contrôler mon slider avec les flèches du clavier,

J'ai récupérer un script tout fait et je ne sais pas comment intégrer cette fonction. j'ai pas mal chercher, mais j'avoue que je suis un peu perdut. Voici le code en question.

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 </div>
 
 
  <!-- Les fleches de navigations -->
 
  <img src="resources_slider/fleche-gauche_02.png" id="fleche_gauche" class="fleche" onClick="prevImage()">
  <img src="resources_slider/fleche-droite_02.png" id="fleche_droite" class="fleche" onClick="nextImage()">
 
 
 
</div>
<script>
 
 
 
 
 
  // Des Variables pour pouvoir modifier facilement ce qui doit l'être
 
  var image = 1;
  var maxImages = 42;
  var slider = document.getElementById('slider');
  var timeout
 
  // La fonction qui change les images. Peut pointer vers une image spécifique, ou bien être appelée vide, pour passer ç celle d'apres
  function changeImage(requiredImage) {
 
    // Début de l'algorithme  .
    if (!requiredImage && requiredImage != 0){ //Si nous n'avons pas spécifié une image
      if(image < maxImages){// Si l'image n'est pas la dernière, on avance d'une image
        image++;
      }
      else{
        image = 1;//Si Nous sommes sur la dernière, on reviens au début
      }
    }
    else{ // Si nous avont spécifié une image
      if(requiredImage > maxImages){//Si nous avont spécifié une image au dela de la dernière, on revient à la première
        image = 1;
      }
      else if(requiredImage < 1){ //Si nous avont spécifié une image 0 ou moins, on vas à la dernière image
        image = maxImages;
      }
      else{
        image = requiredImage; // Sinon, on vas à l'image spécifiée.
      }
    }
    //On dis au slider à travers sa classe quel image il doit afficher
    slider.className = "image"+image;
 
    // On nettoie et relance le timeout
    clearTimeout(timeout)
    timeout = setTimeout("changeImage()",secDuration*1000);
  }
 
  //Deux petites fonctions tres compréhensibles
  function nextImage(){
    changeImage(image+1);
  }
  function prevImage(){
    changeImage(image-1);
  }
 
    onKeyPress="if (event.keyCode == 37) prevImage()"
    onKeyPress="if (event.keyCode == 39) nextImage()"
 
  //On met le slide sur l'image par défaut, ici la 1ere
  changeImage(1);
</script><br />

Si quelqu'un pouvait m'aider, je lui en serait trés reconnaissant

Merci

[NoSmoking]

Bonjour et bienvenue sur DVP.
Sur l'événement keydown du document tu gères les actions suivant les touches enfoncées.

[copinou]

Bonjour,

En combinant deux réponses de différents forum, j'ai trouvé la solution.

Il suffit d'ajouter ce code

Code :

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

1
2
3
4
5
6
7
8
	 document.addEventListener("keydown", function(e){
    if(e.keyCode === 37){
        prevImage();
    }
    else if(e.keyCode === 39){
        nextImage();
    }
	});

Merci beaucoup

[NoSmoking]

Pourquoi se limiter aux seules touches LEFT/RIGHT ?

[copinou]

http://corentinpenloup.com/amourbpm/chap01.html

Parce-que dans mon cas je n'ai pas besoin d'autres touches

(et j'avais pas vu le bouton "résolu" deso)

[NoSmoking]

Toi tu n'en as pas besoin mais il arrive que les habitudes des internautes font qu'ils ne vont pas à gauche/droite mais qu'ils montent/descendent voire même encore +/-, sans oublier la mouseWhell !