fleche du clavier vers un lien

**peltierc22** · 25/11/2010, 01h59

je suis débutant

, je construis un site pour montrer mes photos en (X)HTML. Je suis à la recherche d'une méthode pour visualiser des photos d'une galerie en appuyant sur les flèches du clavier au lieu des liens "précédent" et "suivant".
Est-ce possible en javascript ?

**vermine** · 25/11/2010, 08h10

Bonjour,

Vous pouvez déjà lire cet exemple sur la détection de la touche enfoncée.

Lorsque vous serez parvenu à déterminer la flèche enfoncée, vous pourrez nous montrer un peu de votre code HTML pour comprendre le mécanisme de la galerie photo.

**peltierc22** · 25/11/2010, 09h04

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<p class="suivant">
		<a href="lac.html">&laquo;</a>
		<a id="index"  href="../../galerie_nouveaute_1.html">index</a>
		<a href="petite_centauree_commune.html">&raquo;</a>
    </p>
	<!--corps-->
 
	<p>
		<img src="oeillet_velu.jpg" alt="oeillet_velu" title="oeillet_velu"/>
	<h2>l'oeillet velu</h2>
	</p>

Je souhaite pouvoir appuyer sur la touche "flèche droite" de mon clavier pour avoir la même fonction que la ligne :

Code :

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

<a href="petite_centauree_commune.html">&raquo;</a>

et sur la touche "flèche gauche" de mon clavier pour avoir la même fonction que la ligne :

Code :

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

<a href="lac.html">&laquo;</a>

**Bovino** · 25/11/2010, 09h14

Envoyé par vermine

Vous pouvez déjà lire cet exemple sur la détection de la touche enfoncée.

Tu as au moins pris la peine de regarder le lien fourni ?

**peltierc22** · 25/11/2010, 09h36

Oui, mais j'ai pas tout compris

la fonction détecte le navigateur :
1 nescape alors ???
2 explorer alors ???
cela veut dire quoi

Code :

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

1
2
document.getElementById('zone').value = String.fromCharCode(e.which);
            document.getElementById('zone1').value = e.which;

zone et zone 1 sont-ils les codes pour les touches du clavier?

Dans le corps de la page :

Code :

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

<input type="text" id="zone" size="30" />

type je met img pour la prochaine image ?
id je remet le code pour la touche clavier ?
size c'est la taille ??

**vermine** · 25/11/2010, 10h58

Envoyé par peltierc22

la fonction détecte le navigateur :
1 nescape alors ???
2 explorer alors ???
cela veut dire quoi

Cela veut dire que les navigateurs gèrent différemment cette notion de "touche de clavier enfoncée". Ca permet d'avoir un code compatible sur (tous ?) les navigateurs.

Envoyé par peltierc22

zone et zone 1 sont-ils les codes pour les touches du clavier?

Non, ce sont les id d'input HTML. On va remplir ces input en titre d'exemple pour que vous, vous ayez un rendu visuel du code de la touche qui a été enfoncée. Ce n'est qu'un exemple. Dans votre cas, vous ne devez pas afficher le code de la touche. Par contre, ce qui se trouve après le "=" vous intéresse.

Code :

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

1
2
3
4
5
6
7
8
9
String.fromCharCode(e.which);
//ou
e.which;
//
//et
//
String.fromCharCode(e.keyCode);
//ou
e.keyCode;

C'est en effectuant une condition sur la valeur que renvoie ces instructions que vous allez déterminer si vous devez simuler le clic sur la flèche "suivante" ou bien sur la flèche "précédente".

Exécutez le code qui se trouve dans la FAQ et vous comprendrez mieux.

**peltierc22** · 25/11/2010, 12h06

j'ai intégré le code en lien dans ma page :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
    <title>cascade_herisson_1</title>
	<meta http-equiv="Content-Type" content="text/html;
	charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css"
	title="Mon style" href="csspaysage.css" />
	<script type="text/javascript" src="prot.js"></script>
	<script type="text/javascript">
	function detectTouche(e){
    if(parseInt(navigator.appVersion,10) >=4){
        if(navigator.appName == 'Netscape'){ // Pour Netscape, firefox, ...
            document.getElementById('zone').value = String.fromCharCode(e.which);
            document.getElementById('zone1').value = e.which;
        }
        else{ // pour Internet Explorer
            document.getElementById('zone').value = String.fromCharCode(e.keyCode);
            document.getElementById('zone1').value = e.keyCode;
        }
    }
}
 
	</script>
  </head>
 
  <body onload="prot()" onkeydown="detectTouche(event)">
 
    <input type="text" id="zone" size="30" />
    <input type="text" id="zone1" size="30" />
	<!--en tête-->
	<p class="imagebanniere">
		<img src="../../banagrion.jpg" alt="les yeux d'un agrion" title="regard d'un agrion"/>
	</p>
	<p class="lienssousbanniere">
		<a href="../../index1.html">Accueil</a> <a href="../../galeries.html">Galeries</a > <a href="../../auteur.html">Auteur</a > <a href="../../tirages.html">Tirages</a > <a href="http://doubsnature.over-blog.com">Blog</a > <a href="liens.html">Liens</a >
		<a href="../../contact.html">Contact</a >
	</p>
	<p class="suivant">
		<a href="cascade_herisson.html">&laquo;</a>
		<a id="index" href="../../galerie_paysage_1.html">index</a>
		<a href="cascade_herisson_2.html">&raquo;</a>
    </p>
	<!--corps-->
	<p>
 
		<img src="cascade_herisson_1.jpg" alt="cascade_herisson" title="cascade_herisson"/>
	<h2>cascade du hérisson 1</h2>
	</p>
 
<!--pied de page-->
	<p class="reproductioninterdite">
		©Christian Peltier 2010-Toute reproduction interdite-tous droits réservés
	</p>
   </body>
</html>

j'ai deux petite case tout en haut qui affiche "%" "37" quand je clique sur la flèche gauche et " ' " "39" quand je clique sur la flèche droite.

ça c'est ce qui se passe, ai-je bien intégrer le code javascript dans ma page HTML ? car j'ai un autre code javascript prot.js (pour "empêcher" un clic droit de la souris), mais dans un fichier externe. Le code javascript que j'essaye de mettre pour les flèches du clavier, est-ce que je dois aussi le mettre dans un fichier externe .js ?

**vermine** · 25/11/2010, 13h40

Vous mettez le script où vous voulez (dans le <head> de la page HTML ou bien dans un fichier externe ".js"). Ce que je voulais, c'est que vous compreniez que vous allez maintenant devoir jouer avec les "27" ou "29". Vous pouvez donc enlever les deux champs HTML en question et modifier la fonction Javascript :

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
 
function detectTouche(e){
   var key_code = "";
 
   if(parseInt(navigator.appVersion,10) >=4){
        if(navigator.appName == 'Netscape'){ // Pour Netscape, firefox, ...
            key_code = e.which;
        }
        else{ // pour Internet Explorer
            key_code = e.keyCode;
        }
   }
 
   if(key_code == "27")
       alert("fleche de gauche");
   else if(key_code == "29")
       alert("fleche de droite");
}

Bien entendu, vous devez remplacer les "alert(...)" par des redirection vers l'un ou bien l'autre page html. Prenez exemple sur ce post-ci. Lisez bien tout et surtout la dernière réponse.

**peltierc22** · 25/11/2010, 14h38

Désolé mais j'ai pas tout compris

j'ai essayé ceci mais cela ne marche pas :

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
<script type="text/javascript">
	function <script type="text/javascript">
	function detectTouche(e){
   var key_code = "";
 
   if(parseInt(navigator.appVersion,10) >=4){
        if(navigator.appName == 'Netscape'){ // Pour Netscape, firefox, ...
            key_code = e.which;
        }
        else{ // pour Internet Explorer
            key_code = e.keyCode;
        }
   }
 
   if(key_code == "37")
       alert("fleche_gauche");
	   window.location.href="cascade_herisson.html";
   else if(key_code == "39")
          alert("&raquo;");
		  window.location.href="cascade_herisson_2.html";
 
	</script>(e){
   var key_code = "";
 
   if(parseInt(navigator.appVersion,10) >=4){
        if(navigator.appName == 'Netscape'){ // Pour Netscape, firefox, ...
            key_code = e.which;
        }
        else{ // pour Internet Explorer
            key_code = e.keyCode;
        }
   }
 
   if(key_code == "37")
       alert("fleche_gauche");
	   window.location.href="cascade_herisson.html";
   else if(key_code == "39")
          alert("&raquo;");
		  window.location.href="cascade_herisson_2.html";
 
	</script>

La fonction evénement "detectTouche" ne doit-elle pas être remplacé par "onkeydown" ?

**vermine** · 25/11/2010, 14h48

Vous avez fait un drôle de copier/coller.

Copiez correctement mon code dans les balises suivantes :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<html>
...
<head>
...
<script type="text/javascript">
   //ici
</script>
</head>
 
<body onkeydown="detectTouche(event)">
...
</body>
</html>

**vermine** · 25/11/2010, 15h00

Tant que j'y suis, petite remarque sur la syntaxe Javascript. Un if de la manière suivante exprime qu'on n'exécutera qu'une seule instruction "Si la condition est respectée" et une seule instruction "Si la condition n'est pas respectée". Ici c'est soit une alert soit l'autre :

Code :

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

1
2
3
4
5
 
   if(key_code == "37")
       alert("fleche_gauche");
   else if(key_code == "39")
          alert("&raquo;");

Dans le cas où vous désirez exécuter plusieurs instructions, vous devez mettre des accolades :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
   if(key_code == "37")
   {
       alert("fleche_gauche");
       window.location.href="cascade_herisson.html";
   }
   else if(key_code == "39")
   {
        alert("&raquo;");
        window.location.href="cascade_herisson_2.html";
   }

**peltierc22** · 25/11/2010, 15h01

comme ceci:

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
<script type="text/javascript">
	function detectTouche(e){
   var key_code = "";
 
   if(parseInt(navigator.appVersion,10) >=4){
        if(navigator.appName == 'Netscape'){ // Pour Netscape, firefox, ...
            key_code = e.which;
        }
        else{ // pour Internet Explorer
            key_code = e.keyCode;
        }
   }
 
   if(key_code == "37")
       alert("fleche de gauche");
 
   else if(key_code == "39")
       alert("fleche de droite");
 
}
 
 
	</script>
  </head>
 
  <body onkeydown="detectTouche(event)">

quand je clique sur une flèche une fenêtre s'ouvre et indique flèche de gauche ou de droite. Mais la page HTML suivante ou précedente ne s'affiche pas.

**vermine** · 25/11/2010, 15h02

Voir la remarque précédente.

**peltierc22** · 25/11/2010, 17h42

j'étais entrain d'écrire ma dernière intervention quand vous avez posté, désolé je n'avais pas vu

donc voici mon code corrigé qui fonctionne :

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
<script type="text/javascript">
	function detectTouche(e){
   var key_code = "";
 
   if(parseInt(navigator.appVersion,10) >=4){
        if(navigator.appName == 'Netscape'){ // Pour Netscape, firefox, ...
            key_code = e.which;
        }
        else{ // pour Internet Explorer
            key_code = e.keyCode;
        }
   }
 
   if(key_code == "37")
   {
       alert("fleche de gauche");
	   window.location.href="cascade_herisson.html";
	}   
   else if(key_code == "39")
   {
       alert("fleche de droite");
	   window.location.href="cascade_herisson_2.html";
	}   
}
 
 
	</script>

Un grand merci

Mais est-il possible d'enlever l'"alerte("") et d'afficher directement la photo suivante. Car actuellement, je clique sur la flèche droite de mon clavier, apparait une fenêtre "fleche droite", je clique sur cette fenêtre OK et enfin la photo suivante apparait.
Je souhaitais au départ pouvoir cliquer sur les flèches de mon clavier pour des raisons pratiques et plus ergonomiques à mon avis.
Comment puis_je faire sans passer par "la case OK" ?