Pour étendre la surface cliquable d’un lien les CSS sont bien utiles : il suffit d’augmenter le padding de l’ancre concernée. Mais ne serait-il pas judicieux de rendre cliquable l’élément parent d’un lien ? C’est ce que propose Eroan Boyer dans son billet Étendre la portée d’un lien avec Jquery :
<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>
Notons toutefois que HTML5 permet à la balise a de contenir d’autres éléments, comme le suggère le W3C Working Draft :
<a href="http://ad.example.com/?adid=1929&pubid=1422"> <section> <h1>Mellblomatic 9000!</h1> <p>Turn all your widgets into mellbloms!</p> <p>Only $9.99 plus shipping and handling.</p> </section> </a>
Bonjour, merci pour ce lien. En espérant qu’il puisse aider du monde d’ici à la généralisation du html5 ;)
[...] This post was mentioned on Twitter by bb (css4design), br1o les bons tuyaux. br1o les bons tuyaux said: Étendre la zone cliquable d’un lien à l’élément parent avec jQuery http://j.mp/bJaQha [...]
oui je viens d’apprendre un truc sur HTML5 et la balise A tiens !
Bonjour, Merci pour cet article. En effet HTML5 permet bien des choses plus qu’utiles et sémantiquement fortes.
L’utilisation d’une telle forme de lien est présente que ce site, notamment en page d’accueil : http://www.slconstantia.com/ De quoi rendre vraiment agréable et rapide la navigation par hyperlien.
[...] Étendre la zone cliquable d’un lien à l’élément parent avec jQuery –Quelques lignes de code Jquery pour étendre la zone cliquable d’un lien à un élément parent, généralement un <div>. [...]