Acte 1
Vous recevez de la part de votre chef de projet la maquette ci-dessous, avec la consigne suivante :
Voici la maquette pour le nouvel encart d’article à intégrer sur le site. Il faudra bien faire en sorte que tout l’encart soit cliquable.
Comment faire un lien sur tout un bloc ?
Acte 2
À l’aide du code HTML suivant, rendez tout son contenu cliquable vers la page http://www.theverge.com/2014/9/5/6108947/moto-360-review. Comparez les avantages et inconvénients de chaque solution.
<div class="post">
<img class="post-img" alt="Moto 360" src="http://cdn2.vox-cdn.com/uploads/chorus_image/image/38013858/DSCF4522-2040.0.0_standard_300.0.jpg" width="300" height="199" />
<h1 class="post-title"><a class="post-link" href="http://www.theverge.com/2014/9/5/6108947/moto-360-review">Moto 360 review</a></h1>
<p class="post-author">By David Pierce</p>
</div>
Quelles solutions pourrait-on envisager ? Essayez d'exploiter plusieurs pistes : HTML, CSS, JS…
En JavaScript, on peut ajouter un événement au clic de chaque .post.
document.addEventListener('DOMContentLoaded', function() {
var items = document.querySelectorAll('.post');
for(var i=0; i < items.length; i++) {
var item = items[i];
item.addEventListener('click', function() {
var postLinks = this.querySelectorAll('.post-link');
if(postLinks.length > 0)
{
url = postLinks[0].getAttribute('href');
window.location = url;
}
});
}
});Avec jQuery, on peut écrire ça plus simplement :
$(document).ready(function() {
$('.post').click(function(e) {
var url = $(this).find('.post-link').eq(0).attr('href');
window.location = url;
});
});Ces solutions sont bonnes pour l'accessibilité, l'intéropérabilité et le référencement, mais moins pour l'expérience utilisateur (car on désactive des fonctionnalités de clics secondaires par exemple).
En HTML 5, on peut ajouter un lien autour de tout un block.
<a class="post-link" href="http://www.theverge.com/2014/9/5/6108947/moto-360-review">
<div class="post">
<img class="post-img" alt="Moto 360" src="http://cdn2.vox-cdn.com/uploads/chorus_image/image/38013858/DSCF4522-2040.0.0_standard_300.0.jpg" width="300" height="199" />
<h1 class="post-title">Moto 360 review</h1>
<p class="post-author">By David Pierce</p>
</div>
</a>Cette solution est bonne pour l'expérience utilisateur (car toute la zone sera bien cliquable). Mais elle moins bonne pour l'accessibilité et le référencement (car il y a trop de contenus textes dans le lien) ou l'intéropérabilité (car elle ne fonctionne qu'à partir d'IE9).
En CSS, on peut utiliser un pseudo-élément [1] sur la balise <a>, positionné ensuite pour recouvrir tout le .post.
.post {
/* définit le contexte du
positionnement absolu des
éléments enfants */
position: relative;
}
.post-link:before {
content:'';
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background-color:rgba(0,0,0,0);
}Cette solution est bonne pour l'accessibilité, le référencement et l'expérience utilisateur. Pour l'intéropérabilité, cette solution fonctionne bien à partir d'IE9 sur l'ensemble de la zone, et à partir d'IE8 sur les contenus images et textes uniquement.
Acte 3
Vous venez de recevoir une nouvelle précision de la part de votre chef de projet :
Au fait, il faudrait que le nom de l’auteur soit lui-aussi cliquable et ramène vers la page de l’auteur (http://www.theverge.com/users/piercedavid).
Quelles solutions se prêtent le mieux à cette modification ?
En CSS, il faut donner un contexte d'empilement [2] au lien placé sur l'auteur.
.post-author a {
position:relative;
z-index:1;
}