La Position des images et des liens sur une image

J'ai une image, sur laquelle je veux placer des liens, qui peut être soit un texte ou une image. À peu près ce que Wikipédia n'a ici par exemple (la carte de l'Allemagne et de ses états): http://en.wikipedia.org/wiki/States_of_Germany
Retour dans les années 90, je ai utilisé le map tag pour créer des pièces cliquable sur l'image.

J'ai regardé le code source de la carte sur Wikipédia et a constaté que tous les membres d'une position absolue. Donc, il y a un moyen facile de mettre en œuvre une telle chose? Ou dois-je utiliser, par exemple, Photoshop pour vérifier la position absolue et coder en dur dans le CSS/HTML?

InformationsquelleAutor cherrun | 2013-01-09
  1. 2

    Comme vous l'avez déjà remarqué, Wikipedia utilise <div>-éléments qui sont positionnés sur l'image. D'une façon ou d'une autre, vous devrez fournir à l' (absolue) des coordonnées pour les textes que vous souhaitez placer sur le dessus de l'image.

    Vous pouvez essayer de bidouiller pour obtenir les coordonnées correctes ou utiliser un(ny) application d'édition d'image exactement trouver ces coordonnées dans l'image.

    Wikipedia utilise une structure comme ce

    HTML:

    <div class="container">
  <img src="myImage.png" />
  <div class="text1">Text1</div>
  <div class="text2">Text2</div>
</div>

    CSS:

    .text1 {
  position:absolute;
  left:50px;
  top:100px
}

.text2 {
  position:absolute;
  left:200px;
  top:50px
}

    (Sauf qu'ils ont mis directement les styles CSS dans le HTML des éléments...)

    Voir cette jsFiddle pour un exemple de travail.

    • Pas un grand fan de positionnement absolu
    InformationsquelleAutor Veger
  2. 0

    Je suppose que vous avez besoin d'un HTML la carte (exemple http://www.w3schools.com/tags/tag_map.asp), plus un peu de javascript à inclure le texte sur elle.

    Veuillez jeter un oeil à la question suivante, cela peut vous aider:

    HTML, jQuery : Afficher le texte sur la zone de l'image-carte

    InformationsquelleAutor tetuje
  3. 0

    Si vous créez quelque chose de semblable dans le lien que vous avez mentionné, vous avez obtenu d'être indiquant ces positions. N'est-ce pas? absolute positioning est bon pour aller dans ce cas.

    Mais si votre scénario ne vous oblige pas à mettre ces liens dans les emplacements exacts sur l'image, vous pouvez essayer quelque chose comme cela.

    CSS//////////

    div.back{
    background:url('path/to/your/image.extension');
    width:/*width of the image*/;
    height:/*height of the image*/
}

    Ce div avec classe back tout fonctionne comme la façon dont vous le souhaitez. Puis mettre les liens à l'intérieur de la div et le lien sera affiché en haut de l'image.

    Découvrez ce violon.

    InformationsquelleAutor Praveen Puglia