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 ?

fleche du clavier vers un lien

JavaScript

Vue hybride

Discussions similaires

Partager

Partager