Étendre la portée d’un lien avec Jquery
Pour ceux qui ne connaissent pas Jquery, il s’agit d’une librairie Javascript qui permet de simplifier le développement de scripts et de garantir un fonctionnement similaire sous tous les navigateurs, depuis Firefox à Chrome en passant par Internet Explorer et Opera. Il fonctionne de la même façon que les concurrents Mootools et Prototype, avec toutefois une communauté plus dynamique.
Utilisateur de Jquery depuis plus d’un an, je vous propose un focus sur une astuce simple mais qui s’est avérée pratique dans de nombreux cas de figures. Après l’avoir mise en place sur Scooter System dans le cadre d’une refonte graphique, je l’ai rapidement intégrée à plusieurs autres sites tant elle s’est avérée fonctionnelle.
Les quelques lignes de code Jquery ci-dessous vous permettront d’étendre la zone cliquable d’un lien à un élément parent, généralement un <div>. Cela permet d’offrir une expérience utilisateur agréable et intuitive tout en conservant une structure de liens naturelle. Pour obtenir un résultat similaire sans utiliser Jquery, il faudrait utiliser des liens composites, déconseillés pour le référencement.
<script type="text/javascript">
$(function(){
$(".zonecliquable").mouseover(function(){
$(this).css("cursor","pointer").find("a").css("text-decoration","underline");
}).mouseout(function(){
$(this).find("a").css("text-decoration","none");
}).click(function(e){
document.location.href = $(this).find("a").attr("href");
e.preventDefault();
});
});
</script>
La mise en oeuvre de ce script est simple. Après avoir intégré un appel à la dernière version de la librairie Jquery en header, il vous suffit de copier-coller ce code en pied de page, juste avant la balise </body>. Les éléments ayant la classe « zonecliquable » deviendront cliquables et pointeront vers le lien qu’ils contiennent. Les liens se surligneront de façon naturelle au survol de la souris.
Attention, chaque élément ne doit contenir qu’un lien sous peine de compromettre le fonctionnement du script. Le nom de la classe peut être changé pour s’adapter à une charte graphique existante. Pour voir ce script en fonctionnement, je vous invite à jeter un oeil sur les zones de listes de Scooter System ou de TouchMobile. N’hésitez pas à poser vos questions ou à laisser vos commentaires ci-dessous.
En effet, script extrêmement pratique et idéal pour le référencement.
Je l’utilise sur chacun de mes sites dés que cela est possible.
Merci !
Bonjour et merci beaucoup pour ce script, c’est pile poil ce que je cherchais!
Je viens de lire au passage qu’avec HTML5, on peux insérer des éléments divers dans un , ce qui facilitera la tâche.
Mais j’ai ajouté un petit quelque chose à ce script, pour prendre en compte la navigation au clavier et donc le focus. Il s’agit donc après mouseover et mouseout d’ajouter deux comportements focusin et focusout, ce qui donne:
$(function(){
$(« .zonecliquable »).mouseover(function(){
$(this).css(« cursor », »pointer »).find(« a »).css(« text-decoration », »underline »);
}).mouseout(function(){
$(this).find(« a »).css(« text-decoration », »none »);
}).focusin(function(){
$(this).find(« a »).css(« text-decoration », »underline »);
}).focusout(function(){
$(this).find(« a »).css(« text-decoration », »none »);
}).click(function(e){
document.location.href = $(this).find(« a »).attr(« href »);
e.preventDefault();
});
});
Voilà, c’est peut-être bateau pour les connaisseur de jquery, mais moi qui débute en la matière, j’étais bien content de trouver comment faire ça.
ciao ;-)
Merci pour votre commentaire, je n’avais jamais pensé à intégrer la navigation au clavier car je ne pratique pas, mais ça peut en effet être utile.
Bonne continuation !