Bild + Usemap mit Text darüber

[Felix Riesterer]

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.