Comment mettre une image entiere À la place d’un lien ?


Posté le 25 nov 2014 dans la catégorie css.

Vous créez une page internet et vous décidez de remplacer votre lien par une image. Seulement vous vous apercevez que l’image entière n’apparait pas comme vous le souhaitez. Nous allons voir ensemble comment corriger cela.

 

1. L’image sur le lien

Vous créez votre fichier HTML avec un lien.

<h1>Les capitales</h1>
<div id="chapitre1">
<a href="#">Paris</a>
</div>

Ensuite vous choisissez une image que vous mettez en fond du lien.
Le CSS sera le suivant :

#chapitre1 a {
background-image: url("paris.jpg"); /*Lien vers l'image à mettre sur le lien.*/
background-repeat: no-repeat; /*On supprime la répétition de l'image.*/
width: 200px; /*Largeur de l'image.*/
height: 133px; /*hauteur de l'image.*/
}

 

2. Le problÈme

Vous testez le code précédent mais vous vous apercevez que cela ne fonctionne pas.

Résultat

Résultat

En effet l’image prend seulement la place sur texte sur lien mais l’image ne s’affiche pas en entier.

 

3. La solution

Pour que l’image s’affiche en entier à la place du lien il suffit de rajouter un style css : le display block.

#chapitre1 a {
background-image: url("paris.jpg"); /* Lien vers l'image à mettre sur le lien.*/
background-repeat: no-repeat; /* On supprime la répétition de l'image.*/
width: 200px; /* Largeur de l'image.*/
height: 133px; /* Hauteur de l'image.*/
display: block; /* Transforme le lien en un élément du type block.*/
}

Résultat

Résultat

Et voilà ! L’image a sa taille normale et est cliquable sur toute sa surface. Mais pour que cela soit parfait nous allons éloigner le texte (du lien) de l’image.

#chapitre1 a {
background-image: url("paris.jpg"); /* Lien vers l'image à mettre sur le lien.*/
background-repeat: no-repeat; /* On supprime la répétition de l'image.*/
width: 200px; /* Largeur de l'image.*/
height: 133px; /* Hauteur de l'image.*/
display: block; /* Transforme le lien en un élément du type block.*/
text-indent: -999999px; /* On déplace le texte du lien assez loin pour ne plus le voir et n'avoir que l'image*/
}

Résultat final.

Résultat final.

Maintenant c’est à vous d’essayer !

 
• Article complémentaire : Comment supprimer le blanc lors d’un hover sur un(e) bouton/image ?

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>