Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
Dreamgratuit - Philosophie
11 janvier 2008

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;
}

Publicité
Commentaires
L
Super, ça marche parfaitement et c'est très simple, mais j'aurais souhaité avoir plusieurs zones cliquables sur une même image. Comment puis-je faire ?<br /> <br /> Merci !
B
Très bonne méthode, merci, pas bien compliqué à mettre en place si on fait attention à deux choses:<br /> <br /> - bien placer le code HTML où il faut, selon que l'on est un title, un wrapper ou autre, ça change tout<br /> <br /> - rajouter un float et/ou un z-index peut permettre de respecter un menu qui serait pas loin ...<br /> <br /> <br /> <br /> ++
R
Peut être un peu tardivement mais un grand Merci!!!!!!!!!!!!!!!
M
Bonsoir,<br /> Cela créer des confusion quand plusieurs lien sont appelés.
D
code super simple et efficace ! merci :))
Archives
Publicité
Publicité