Voici une technique en CSS pur de sélection de lien distant ("remote link") :

Rien de surprenant dans le code CSS, c'est simplement astucieux.

Il n'y a en fait que quatre balises de lien hypertexte "<a>" qui englobent chacun des personnage grâce à un identifiant CSS distinct (id="tom") qui permet de positionner une image en CSS ainsi qu'une bordure.

Voici le bloc concernant Tom :

<a href="#tom" id="tom">
	<span class="name">Tom Colicchio</span><br />
	One of the culinary world's most celebrated figures, Tom Colicchio returns as head judge for Top Chef: New York.
	<img src="images/tom_1.jpg" alt="Tom Pic" />
</a>

Une façon intéressante de se passer d'outils tels que Flash ou Javascript qui alourdissent considérablement le poids d'une page web.

L'effet est simple, propre et professionnel tout en préservant un code source respectueux des standards et agréable pour celui qui viendra fouiner dans votre code source 😉

Pour essayer par vous-même c'est par ici.

Merci à Michael

Auteur : Mr Xhark

Fondateur du blog et passionné par les nouvelles techno, suivez-moi sur twitter