des liens avec images sans IMG

Les images cliquables sont très pratiques. Avec un icône très explicite, on amène notre visiteur à interagir avec notre application sans recourir à un long discours. Exemple:

<a href="monAction.php"><img src="images/drapeau-francais.jpg"></a>

et affiche ceci

Déjà, il faut modifier le code HTML pour retirer la bordure bleue:

<a href="monAction.php"><img src="images/drapeau-francais.jpg" border="0"></a>

la solution CSS

La solution alternative consiste à exploiter exclusivement CSS pour afficher l'image cliquable sans recourir à l'élément IMG:

<a href="selectLangue.php?lang=fr">&nbsp;</a>
<a href="selectLangue.php?lang=en">&nbsp;</a>

et qui affiche ceci:

Comme nous avons l'intelligence de développer en HTML5, c'est à dire d'exploiter les nouveaux éléments article, header, etc... nous avons structuré notre page d'accueil en deux blocs distincts à partir de body:

• un bloc header lui-même contenant un bloc nav pour les onglets, et un bloc aside pour contenir nos liens drapeaux;
• un bloc article contenant le reste de notre page web:

<header>
    <nav>
       ...ici les liens des onglets...
    </nav>
    <aside>
        <a href="selectLangue.php?lang=fr">&nbsp;</a>
        <a href="selectLangue.php?lang=en">&nbsp;</a>
    </aside>
</header>
<article>
   ...ici le reste de notre page...
</article>

Maintenant, il faut définir dans notre CSS la manière dont les éléments a vont afficher les images, c'est à dire les drapeaux français et anglais:

body header aside a {
    display: inline-block;
    width: 40px;
    height: 20px;
    text-decoration: none;
}

On définit de manière générique - et exclusivement dans la hiérarchie body header aside a - la manière dont l'élément a va s'afficher. La première ligne display: inline-block; déclare que l'élément a est devenu un bloc en ligne. Sans cette précision, on ne peut lui affecter de taille et d'image de fond. Les deux lignes height et width déterminent ensuite la largeur et la hauteur d'affichage de l'élément a. Ces paramètres taille et hauteur sont celles des images qui vont être mises en image de fond. Enfin le paramètre text-decoration: none; indique que le lien a devra s'afficher sans bordure ni soulignement.

La description du chemin d'accès body header aside a est très importante, car elle indique au navigateur que les caractéristiques de style ne s'appliquent qu'à l'élément a placé dans cette hiérarchie. La présentation des autres éléments a placés ailleurs dans votre code HTMl sera inchangée.

Définissions maintenant l'image de fond de notre lien hypertexte a en surchargeant notre code CSS:

body header aside a {
    background: url('../images/drapeau-francais.jpg') no-repeat right top;
}

Ce qui va afficher:

Question: comment différencier le second lien sans retoucher à notre code HTML?. On va à nouveau surcharger la déclaration de a en indiquant qu'on affecte le second lien de la hiérarchie:

body header aside a + a {
    background: url('../images/drapeau-anglais.jpg') no-repeat right top;
}

La hiérarchie du second lien est body header aside a + a. La partie de code CSS a + a signifie qu'on s'adresse au second lien a. Résultat:

Question: et si on veut rajouter un lien vers la sélection espagnole? Il suffit de créer une surcharge supplémentaire pour a dans notre CSS:

body header aside a + a + a {
    background: url('../images/drapeau-espagnol.jpg') no-repeat right top;
}

et le code HTML associé:

<aside>
    <a href="selectLangue.php?lang=fr">&nbsp;</a>
    <a href="selectLangue.php?lang=en">&nbsp;</a>
    <a href="selectLangue.php?lang=es">&nbsp;</a>
</aside>

En conclusion, cette méthode est une solution. Elle n'a pas la prétention d'être LA SOLUTION. Elle démontre simplement que la maîtrise du css permet un code HTML allégé et moins contraignant que la solution initiale.