 |
|
|
| |
| PRATIQUE CLIENTS WEB |
|
|
|
| Positionner la sélection sur un lien précis |
| |
Trois méthodes pour faciliter le parcours d'une suite linéaire de pages.
(21/10/2005) |
 |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Dans certains cas (galerie
de photos, slides d'une présentation HTML), on peut souhaite que le visiteur passe d'une page
à l'autre en appuyant simplement sur une touche du clavier, et n'ai pas besoin d'utiliser la souris pour cliquer sur le lien "Suivant"....
Plusieurs solutions sont possibles : nous vous
en présentons trois, qui varient en complexité.
Tout d'abord, faire appel à l'attribut tabindex.
Celui-ci donne à certains éléments choisis un ordre particulier.
C'est le plus souvent utilisé pour diriger le visiteur dans
le remplissage d'un formulaire, mais rien n'empêche, dans notre
cas, de donner un tabindex de 1 au lien "Suivant", qui permet
de passer à la page suivante. Seul souci : le visiteur doit
utiliser deux touches pour avancer : Tab puis Envoi.
<a href="2.html" tabindex="1">Suivant</a>
On peut également faire appel à un peu de JavaScript. La méthode
focus() permet de sélectionner
un élément précis de notre fichier HTML. Elle est très souvent
utilisée par les moteurs de recherche pour placer le curseur
de texte dans le champ de recherche. Ici, on assigne un ID au
lien Suivant, et un appel JavaScript se charge du reste. Au
chargement, Suivant sera sélectionné, et un simple appui sur
Envoi le validera.
JavaScript :
document.getElementById('suiteSlide').focus();
HTML :
<a href="2.html" tabindex="1" id="suiteSlide">Suivant</a>
Enfin,
il est possible, au prix d'un peu plus de travail, de donner
beaucoup plus de choix au visiteur, c'est-à-dire lui permettre
d'utiliser plus de touches du clavier : Espace, Flêche droit,
Flêche gauche... Dans le cas d'une galerie, la contrainte sera
de préciser dans le fichier JavaScript (externe, bien sûr) le
nombre de pages en rotation. Cela permet au code JS de boucler
sur le premier slide une fois arrivé au dernier. Nous utilisons
ici les Server Side Includes pour récupérer le nom du fichier,
qui contient le numéro du slide en cours :
<script>
nombreDeSlides = 6;
// fichier = '1.shtml';
fichier = '<!--#echo var="DOCUMENT_NAME" -->';
slideEnCours = fichier.split('.')[0];
document.onkeyup = touches();
function touches(touche) {
if (!touche) {
touche = event;
touche.which = touche.keyCode;
}
switch (touche.which) {
case 32: // espace
case 39: // fleche droite
case 40: // fleche bas
slideEnCours++;
if (slideEnCours > nombreDeSlides)
{
slideEnCours
= 1;
}
location.href = slideEnCours
+ '.shtml';
}
}
</script> |
|
|
|
|
|
|
