[JS] Sélectionner mes liens avec les flèches du clavier et les ouvrir avec la touche entrée ?

[Airtux]

Salut,

Je vous explique mon problème, j'ai créé un petit site très très simple il y a une iframe qui affiche l'image que je choisis parmi ma grille d'images, à la souris sa fonctionne très bien mais je voudrais pouvoir sélectionner mon image avec les flèches du clavier et l'ouvrir avec la touche entrée.

Voilà comment se présente le code de mon image cliquable :

<a target="iframe1" href="lien-de-l-image.jpg">
<img src="miniature-de-l-image.jpg" title="mon image" /></a>

J'imagine donc qu'il faut passer au choses sérieuses donc au javascript !

Je commence à bien maîtriser le html et le css mais alors en javascript je suis vraiment un noob !

Voilà pourquoi je me tourne vers vous pour demandé de l'aide.

j'ai trouvé ceci qui me semble être une bonne piste :

<script>
document.onkeydown = function(event) {
    event = event || window.event;
    switch (event.keyCode || event.which) {
	case 38:
            alert('up');
            break;
        case 40:
            alert('down');
            break;	
    }
};
</script>

En fait mon problème c'est que je ne sais pas comment remplacer alert('up'); et alert('down'); par la fonction que je veux, donc par la fonction "sélectionné le lien suivant/précédent".

Voilà merci d'avoir pris le temps de me lire malgré mes nombreuses fautes, j’espère que vous pourrez me venir en aide.
-----

[Airtux]

Bon alors j'ai réussi à avancé mais je bloque encore.....

J'ai réussi à faire en sorte de pouvoir naviguer entre mes images avec les flèches du clavier, donc j'ai un carde rouge qui me permet de sélectionner mon image !

Sauf que je bloque à la dernière étape... je doit faire en sorte que quand j'appuis sur l'image elle s'ouvre dans l'iframe.

Un coup de main ne serrait pas de trop

Voila le code que j'ai utilisé pour la navigation par flèches :


Html :

 <tbody>
        <tr>
            <td><a target="iframe1" href="lien-de-l-image.jpg"><img src="miniature-de-l-image.jpg" title="mon image" /></a></td>
            <td><a target="iframe1" href="lien-de-l-image.jpg"><img src="miniature-de-l-image.jpg" title="mon image2" /></a></td>
            <td><a target="iframe1" href="lien-de-l-image.jpg"><img src="miniature-de-l-image.jpg" title="mon image3" /></a></td>
            <td><a target="iframe1" href="lien-de-l-image.jpg"><img src="miniature-de-l-image.jpg" title="mon image4" /></a></td>
            <td><a target="iframe1" href="lien-de-l-image.jpg"><img src="miniature-de-l-image.jpg" title="mon image5" /></a></td>
        </tr>
    </tbody>
</table>

Le jquery

var active = 0;

$(document).keydown(function(e){
    reCalculate(e);
    rePosition();
    return false;
});

$('td').click(function(){
   active = $(this).closest('table').find('td').index(this);
   rePosition();
});


function reCalculate(e){
    var rows = $('#navigate tr').length;
    var columns = $('#navigate tr:eq(0) td').length;
    //alert(columns + 'x' + rows);

    if (e.keyCode == 37) { //move left or wrap
        active = (active>0)?active-1:active;
    }
    if (e.keyCode == 38) { // move up
        active = (active-columns>=0)?active-columns:active;
    }
    if (e.keyCode == 39) { // move right or wrap
       active = (active<(columns*rows)-1)?active+1:active;
    }
    if (e.keyCode == 40) { // move down
        active = (active+columns<=(rows*columns)-1)?active+columns:active;
    }
}

function rePosition(){
    $('.active').removeClass('active');
    $('#navigate tr td').eq(active).addClass('active');
    scrollInView();
}

function scrollInView(){
    var target = $('#navigate tr td:eq('+active+')');
    if (target.length)
    {
        var top = target.offset().top;

        $('html,body').stop().animate({scrollTop: top-100}, 400);
        return false;
    }
}

Le petit CSS :

td.active{
background: red;
}

[Airtux]

Finalement j'ai réussit tout seul avec ce script :

$(document).ready(function () {
 
  $('input').keydown(function (e) {
 
    if (e.which == 39) { // right arrow
      $(this).closest('td').next().find('input').focus();
 
    } else if (e.which == 37) { // left arrow
      $(this).closest('td').prev().find('input').focus();
 
    } else if (e.which == 40) { // down arrow
      $(this).closest('tr').next().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
 
    } else if (e.which == 38) { // up arrow
      $(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
    }
 
  });
 
});
 </script>

Bon j’arrête le monologue.... merci quand même.

[JPL]

Merci du retour.

[A voir en vidéo sur Futura]