En terme d’accessibilité de référencement, il est recommandé de n’attribuer qu’un seul lien par ressource (une page, un document...) dans le code source d’un document html.
Or pour tenir compte des habitudes des utilisateurs, il est souvent nécessaire d’avoir plusieurs zones cliquables, renvoyant vers la même ressource.
La librairie jQuery va nous servir à simuler des liens sur des éléments de la page : titre de l’article, description complète, etc...
Le script est particulièrement adapté pour que les évènements javascript soient gérés correctement avec le mécanisme de pagination ajax particulière au cms SPIP.
Code html
Tout d’abord le contenu : une liste d’articles (squelette SPIP) :
<BOUCLE_articles(ARTICLES) {id_article} {statut?}>
<li class="item hentry" >
[<a href="#URL_ARTICLE" title="Lire [(#TITRE|strtolower)]" class="highlight">(#LOGO_ARTICLE_RUBRIQUE||image_reduire{150})</a>]
<h3 class="entry-title link" >#TITRE</h3>
[<div class="introduction entry-content" >(#INTRODUCTION{100})</div>]
</li>
</BOUCLE_articles>
</ul>
L’unique lien est sur l’image dans le code html, et une classe "link" est appliquée au titre "h3".
Javascript
Le code javascript nécessaire pour déclencher le lien lors du click sur un objet avec la classe "lien" :
function link_init(){jQuery(function(){
jQuery('.link').click(function(){
var link = $(this).parent().find('a').attr('href');
window.location.href=link;
});
});}
jQuery(function(){link_init.apply(document); onAjaxLoad(link_init);});
En cliquant sur le titre, la page se recharge et affiche la cible. Seulement en apparence, rien ne montre à l’utilisateur qu’un lien est disponible. Toujours en javascript, il faut styler les élement et prendre en compte le survol avec la fonction hover. Le code final du fichier fonction.js à inclure dans les entêtes des pages :
function link_init(){jQuery(function(){
jQuery('.link').click(function(){
var link = $(this).parent().find('a').attr('href');
window.location.href=link;
});
jQuery('.link').hover(
function(){
jQuery(this).css("cursor","pointer").css("text-decoration","underline");
},
function(){
jQuery(this).css("cursor","normal").css("text-decoration","none");
}
);
});}
jQuery(function(){link_init.apply(document); onAjaxLoad(link_init);});
Ce code est bien sûr à adapter selon les besoins et la structure de la page, notamment en ce qui concerne la recherche de l’attribut "href" qui contient l’url cible.
onAjaxLoad est une fonction spécifique à SPIP. Sans elle, les évènements ne fonctionneront pas lors de l’utilisation du mécanisme des blocs ajax (pagination ou autre).
RSS 2.0