fleche du clavier vers un lien

Version imprimable

25/11/2010, 01h59
peltierc22

fleche du clavier vers un lien

je suis débutant:oops:, 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 ?
25/11/2010, 08h10
vermine

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. ;)

Code:

1 2 3 4 5 6 7 8 9 10 11 <p class="suivant"> <a href="lac.html">«</a> <a id="index" href="../../galerie_nouveaute_1.html">index</a> <a href="petite_centauree_commune.html">»</a> </p>  <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:

<a href="petite_centauree_commune.html">»</a>

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

Code:

<a href="lac.html">«</a>

25/11/2010, 09h14
Bovino

Citation:

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 ?
25/11/2010, 09h36
peltierc22
Oui, mais j'ai pas tout compris :oops:

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

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:

<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 ??
25/11/2010, 10h58
vermine
Citation:

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.

Citation:

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:

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. ;)

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

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
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 ?

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:

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.

Désolé mais j'ai pas tout compris :oops:
j'ai essayé ceci mais cela ne marche pas :

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
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" ?

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

Copiez correctement mon code dans les balises suivantes :
Code:

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>

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:

1 2 3 4 5 if(key_code == "37") alert("fleche_gauche"); else if(key_code == "39") alert("»");
Dans le cas où vous désirez exécuter plusieurs instructions, vous devez mettre des accolades :
Code:

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("»"); window.location.href="cascade_herisson_2.html"; }

comme ceci:

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
<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.

25/11/2010, 15h02
vermine

Voir la remarque précédente. ;)

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

donc voici mon code corrigé qui fonctionne :
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 <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 :ccool::ccool::ccool::)
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" ?

25/11/2010, 18h14
vermine

Vous pouvez enlever les lignes avec les alert et ne conserver que les lignes avec les window.location.href. ;)
25/11/2010, 18h57
peltierc22

ça marche, super merci beaucoup :ccool::hola::ave::applo:
07/12/2010, 17h50
aaaaax

Oui ça marche très bien chez moi aussi, à mon tour de vous remercier !
07/12/2010, 20h18
vermine

\o/

De rien. Le forum est là pour ça et ça fait plaisir que les gens se connectent pour remercier. ;)