Landkarte-relative

by hanmueller

HTML

<div>
    <div style="float:left">
        <p>Hier soll viel Text stehen.</p>
    </div>
    <div id="map">
        <img src="http://upload.wikimedia.org/wikipedia/commons/4/4a/Radevormwald_in_GM.svg">
        <div class='point' style='left:70px;top:175px;'>
            <div class="info">
                 <h2>Aussichtsturm</h2>

                <p> <a href="#">Hier steht ein hoher Turm mit einem praechtigen Ausblick.</a>

                </p>
            </div>
        </div>
    </div>
</div>

CSS

#map {
    position:relative;
}
#map .point {
    border-radius:5px;
    width:8px;
    height:8px;
    position:absolute;
    background:red;
    cursor:pointer;
}
#map .point .info {
    padding:0 1em;
    position:absolute;
    width:200px;
    left:-5px;
    top:5px;
    background:white;
    border:2px solid rgba(0, 0, 0, 0.5);
    display:none;
}
#map .point:hover .info {
    display:block;
}
#map h2 {
    font-size:20px;
}