Position von Bildern und links auf einem Bild

Habe ich ein Bild, auf dem ich möchte links, die entweder text oder ein Bild. Ziemlich viel, was die Wikipedia hat hier zum Beispiel (die Deutschland-Karte und Ihre Mitgliedstaaten): http://en.wikipedia.org/wiki/States_of_Germany
Zurück in den 90er Jahren würde ich verwendet habe, der map - tag zu erstellen, die anklickbare Teile auf dem Bild.

Ist, habe ich mich an den source code von der Karte auf Wikipedia und bemerkt, dass alle Mitgliedstaaten von einer absoluten position. So gibt es eine einfache Möglichkeit so etwas umzusetzen? Oder muss ich verwenden, zum Beispiel Photoshop, zu prüfen, für die absolute position und fest in CSS/HTML?

InformationsquelleAutor cherrun | 2013-01-09
  1. 2

    Als Sie schon bemerkt, dass Wikipedia verwendet <div>-Elemente, die positioniert sind, über das Bild. Die eine oder andere Weise würden Sie brauchen, um die (absolute) Koordinaten für die Texte, die Sie platzieren möchten, auf das Bild.

    Können Sie versuchen, zu hantieren, um die richtigen Koordinaten, oder verwenden Sie ein(New York) Bild-editing-Anwendung, die genau auf die gewünschten Koordinaten innerhalb des Bildes.

    Wikipedia nutzt einige Gebäude wie dieses

    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
}

    (Außer, dass Sie direkt die CSS-Stile in HTML-Elementen...)

    Sehen dieses jsFiddle für ein funktionsfähiges Beispiel.

    • Nicht ein großer fan von absoluter Positionierung
    InformationsquelleAutor Veger
  2. 0

    Ich denke, Sie müssen ein HTML-anzeigen (Beispiel http://www.w3schools.com/tags/tag_map.asp) sowie einige javascript den text über Sie.

    Bitte werfen Sie einen Blick auf die folgende Frage, es könnte helfen:

    HTML jQuery : text über dem Gebiet der image-map

    InformationsquelleAutor tetuje
  3. 0

    Wenn Sie etwas zu schaffen ähnlich wie in dem link von dir erwähnt, du musst pin-pointing diesen Positionen. Ist es nicht? absolute positioning ist gut zu gehen in diesem Fall.

    Aber, wenn Ihr Szenario nicht erfordern, dass man diese links in die genauen Standorte auf das Bild, können Sie versuchen, so etwas wie dieses.

    CSS//////////

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

    Diese div mit Klasse back wird nur arbeiten, wie Sie wollen. Setzen Sie dann die links innerhalb der div und die links werden angezeigt, auf der Oberseite des Bildes.

    Schauen Sie sich dieses fiddle.

    InformationsquelleAutor Praveen Puglia
Schreibe einen Kommentar