Styliser les images des liens cassés en CSS

Elliott Chiaradia |20-04-2016

Il arrive fréquemment qu'un lien d'une de nos images soit cassé. L'affichage de l'image n'est donc plus possible, elle s'affichera sous la forme suivante :

Vous en conviendrez que ce n'est pas très joli et que l'utilisateur ne comprend pas forcément ce que veut dire ce drôle de message. En utilisant du CSS, nous pouvons changer l'apparence de ces liens cassés afin d'obtenir quelque chose de plus adéquat.

 

Quelques exemples

Passons à la pratique, partons avec un squelette HTML basique avec dans le body une balise image pointant vers une URL cassée.

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
    <img src="image$.jpg" alt="The Bot Father - Bot pour Telegram"/>
</body>
</html>

 

Puis ajoutez-y les styles suivants :

img {  
  font-family: 'Helvetica';
  font-weight: 400;
  line-height: 1.8;  
  text-align: center;
}

img:before {  
  content: "Nous sommes désolé mais nous n'arrivons pas à afficher l'image";
  display: block;
  margin-bottom: 10px;
}

 

Dans ce code CSS, nous utilisons ":before" qui nous permet d'afficher du texte avant l'image. Grâce à celui-ci, nous pouvons tenter d'expliquer plus précisément la situation aux utilisateurs.

Voici ce que nous obtenons :

picture-broken-after

 

Pour ce deuxième cas, nous allons rajouter ces quelques lignes au code précédent :

img:after {  
  content: "url: " attr(src);
  display: block;
  font-size: 14px;
}

 

Grâce à elles, nous pouvons afficher du texte après le lien mort. En utilisant l'attribut attr(src), nous affichons l'URL de l'image.

Voici ce que nous obtenons :

picture_broken_styling_before_and_after

 

Dans ce dernier cas, nous allons remplacer complètement l'affichage du lien cassé, et nous allons utiliser une librairie d'icônes comme Font Awesome pour afficher une icône d'image différente.

img {  
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

        
img:after {  
  content: "\f03e" " " attr(alt);
  font-size: 18px;
  font-family: FontAwesome;
  color: black;
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

 

Dans votre code HTML, rajoutez-y l'appel à la librairie Font Awesome :

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

 

Décortiquons le code. Dans le content, nous voulons afficher le texte alternatif de l'image, on l'obtient donc avec le attr(alt). En plus de cela, nous voulons afficher une icône de font-awesome avant celle-ci, pour cela, il suffit d'entrer l'unicode de l'icône après le "\". Dans cet exemple, nous allons utiliser l'icône ayant l'unicode "f03e".

content: "\f03e" " " attr(alt);

 

Puisque nous avons un z-index plus élevé (2 à la place de 1), notre style va se poser par-dessus le style par défaut des liens cassés.

Et voici ce que nous obtenons :

picture_broken-replace_styling

Conclusion

Vous pouvez modifier le CSS comme bon vous semble, cependant ayez toujours une chose en tête, l'utilisateur n'est pas forcément un développeur, il y a de fortes chances qu'il ne comprenne pas pourquoi une image n'est pas affichée, à vous de le lui faire comprendre le plus facilement possible. Et une dernière chose, n'oubliez pas de mettre des textes alternatifs à vos images, c'est bon pour le référencement naturel, mais pas que !