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

Bookmark and Share

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

Catégorie : CSS | Commentaires [15] | Permalien [#]

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

    Posté par Felipe | 29 janvier 2008 à 16:09
  • C'est noté

    Je viens de corriger le billet afin de mettre le S à la fin d'Alsacréations !

    Posté par caroder | 03 février 2008 à 16:42
  • C'est noté

    Je viens de corriger le billet afin de mettre le S à la fin d'Alsacréations !

    Posté par caroder | 03 février 2008 à 16:43
  • 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 !

    Posté par Maxx | 17 mars 2008 à 00:14
  • 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...

    Posté par caroderoder | 19 mars 2008 à 19:54
  • 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)

    Posté par SunDX | 29 mai 2008 à 08:10
  • 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

    Posté par v2j | 01 septembre 2010 à 13:38
  • TROP PARFAIT

    No comment....tout simplement impec ^^

    Posté par Manulus | 04 mars 2011 à 22:55
  • 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

    Posté par Kostrovit | 24 août 2011 à 00:39
  • 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 !

    Posté par Caroder | 28 août 2011 à 20:37
  • thx :))

    code super simple et efficace ! merci )

    Posté par darkM | 26 octobre 2011 à 13:50
  • Problème

    Bonsoir,
    Cela créer des confusion quand plusieurs lien sont appelés.

    Posté par Msc2 | 23 novembre 2011 à 19:45
  • Merci

    Peut être un peu tardivement mais un grand Merci!!!!!!!!!!!!!!!

    Posté par rems | 24 février 2012 à 17:41
  • Attention à la position

    Très bonne méthode, merci, pas bien compliqué à mettre en place si on fait attention à deux choses:
    - bien placer le code HTML où il faut, selon que l'on est un title, un wrapper ou autre, ça change tout
    - rajouter un float et/ou un z-index peut permettre de respecter un menu qui serait pas loin ...

    ++

    Posté par BAB's | 21 mai 2012 à 11:09
  • plusieurs zones cliquables

    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 ?
    Merci !

    Posté par laboubouille | 07 juin 2012 à 20:34
 

Poster un commentaire