Un image map en CSS pur

Il est souvent pratique de mettre en avant certaines zones d’une image afin d’y mettre un lien ou de montrer un endroit précis de l’image. Il existe en HTML la balise <map> qui permet de définir via des coordonnées un endroit d’une image. Il est possible de faire la même chose en CSS. L’avantage d’utiliser des CSS pour faire ça, c’est que l’on peut l’embellir très facilement.

Le principe est d’afficher l’image en arrière plan, pour placer dessus des blocks et ainsi les personnalisés facilement. Je vous laisse juger par vous même le rendu.

Le p’tit plus, on peut changer la couleur de la zone, pour bien l’identifier.