Felix Riesterer: Bild + Usemap mit Text darüber

Beitrag lesen

Lieber Sariel,

Du hast im Wesentlichen ein <img>-Element, über das Du Text legen willst. Die herkömmliche Methode ist die, dass Du das <img>-Element in ein Elternelement verpflanzt und diesem die Eigenschaft position:relative gibst, damit die darin absolut positionierten Elemente eine gemeinsame linke obere Ecke haben. Anschließend packst Du die weiteren Elemente, die Du auf dem Bild darstellen willst, in das selbe Elternelement und positionierst sie absolut.

Beispiel:

<p id="map-area">  
    <img alt="Klickbild" usemap="#map" src="./images/map.jpg" />  
    <span id="text1">Text 1</span>  
    <span id="text2">Text 2</span>  
    <span id="text3">Text 3</span>  
    <map id="map">  
        <area ... />  
    </map>  
</p>
#map-area {  
    position: relative;  
}  
  
#map-area * {  
    position: absolute;  
}  
  
#map-area img {  
    left: 0;  
    top: 0;  
}  
  
#text1 {  
    left: 37px;  
    top: 21px;  
}  
  
#text2 {  
    left: 10px;  
    top: 121px;  
}  
  
#text3 {  
    left: 67px;  
    top: 5px;  
}

Du solltest nur aufpassen, dass die überlagernden Texte die Klickflächen (<area>-Koordinaten) Deiner Map nicht überlappen, da diese sonst nicht mehr uneingeschränkt nutzbar (lies: anklickbar) sind!

Liebe Grüße,

Felix Riesterer.

--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)