Créer une zone clicable (lien) sur une image en background (header)
Il y avait autrefois sur site Alsacréations un petit tutoriel permettant de faire une zone réactive sur une image en background. Cette technique est bien pratique car elle permet de rendre le logo cliquable dans un header (entête) de site lorsque l'image est en fond.
Malheureusement ce tutoriel a disparu dans la version française du site (elle subsiste dans la version anglaise !).
Je vous donne donc ici succintement le code nécessaire et vous laisse consulter le tuto en anglais pour ceux qui veulent plus d'explications.
Code HTML :
<div id="image"><a id="zone1" href="#" title="click"></a></div>
Code CSS :
#image { /* div contenant l'image en arrière plan */
width : 500px;
height: 500px;
background: url(image.png) top left no-repeat;
}
#zone1 { /* la zone de lien */
float: left;
width : 150px;
height: 100px;
margin-left: 20px;
margin-top: 30px;
}