Extensions et tutorials gratuits disponibles sur internet pour Dreamweaver. PHP et ASP. Classement thématique. Blog référencé par Adobe Communauté Dreamweaver.
Dreamweaver gratuit
Créer une zone clicable (lien) sur une image en background (header)
11 janvier 2008 | Posté par caroder à 07:32
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;
}
Commentaires
AlsacréationS ? ;-)
Bonjour et merci pour le lien vers AlsacréationS.
Par contre attention à la faute fréquente qui est d’oublier le “s” final 
C'est noté
Je viens de corriger le billet afin de mettre le S à la fin d'Alsacréations !
C'est noté
Je viens de corriger le billet afin de mettre le S à la fin d'Alsacréations !
Good !
Génial, c'est ce que je cherchais depuis un moment, mais j'ai vraiment du mal à l'intégrer a ma page html...
Dois-je créer un fichier css a part ?
A quel endroi dois-je inserer cela ?
merci !
Pas obligé...
La feuille CSS peut être dans un fichier à part ou dans le document (entre les balises ).
Le HTML doit figurer à l'endroit ou vous souhaitez integrer le lien sur l'image de fond...
Petite souci
Bonjour à tous, j'ai un léger souci avec cette facon de faire; j'ai utilisé avec succès les information pour faire une zone cliquable, et j'ai de plus utilisé la fonction zoom !!
Mais mon problème réside dans le faite que l'image zoomer se place en arrière plan par rapport à mon texte qui se superpose; alors que je souhaiterais l'afficher en premier plan par dessous tout ce qu'il pourrais en dessous !!!
Si quelqu'un as une idée, ce serasi sympa de votre part !!
PS: Vous pouvez constater par vous même le souci sur mon site en première page (image dans un cadre)
Parfait
je cherchais une méthode autre que celle de mettre un div et l'entourer de la balise a car pas conforme aux normes w3c.
Celle ci devrait parfaitement convenir.
merci
TROP PARFAIT
No comment....tout simplement impec ^^
Intégration de la solution
Bonjour,
Je suis débutant en html et CSS mais je me soigne. J'essaie depuis quelques jours différentes solutions de zones cliquables sur une image de fond de page... en vain. Votre solution me semble une bonne piste, mais je n'arrive pas à l'implanter.
Le tutoriel en anglais n'est plus accessible. Dans le code que vous proposez il y a des termes qui doit être remplacés par des adresses. Pouvez-vous l'indiquer plus précisément ?
En vous remerciant par avance
Le "#"
C'est le # qui doit être remplacé par le lien dans le ...
Il faut bien entendu adapter les CSS de #zone1 width, height, margin-left et margin-top à vos besoins !
thx :))
code super simple et efficace ! merci 
)
Problème
Bonsoir,
Cela créer des confusion quand plusieurs lien sont appelés.
Poster un commentaire
Rétroliens
URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=261388&pid=7521098
Liens vers des weblogs qui référencent ce message :
