Axel Richter: map und area shape / Grafik

Beitrag lesen

SELF-Forum

map und area shape / Grafik

Axel Richter
– Informationen zu den Bewertungsregeln

Hallo,

ich habe eine Weltkarte und anhand einer area map verschiedene Linkpunkte auf der Weltkarte gemacht, soweit so gut.
Jetzt will ich auf bestimmten Punkten aber auch noch eine Grafik (z.B. Info.gif) an bestimmten Stellen auf der Grafik anlegen.
Wahrscheinlich mit DIVs aber bei mir werden die divs ob nun relative oder absolute immer außerhalb der Grafik angezeigt :-(

Ja? Du musst einen Bereich mit position:relative (eigentlich irgendeiner position-Eigenschaft, außer static) definieren, in dem sich sowohl Dein großes Bild, als auch Deine kleinen Bilder befinden. Dann kannst Du Deine kleinen Bilder innerhalb des Bereichs absolut positionieren.

Nur wie stell ich das ganze an? Bitte um Hilfe.

Beispiel:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Weltkarte mit Markierungen</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
#weltkarte {position:relative;}  
#weltkarte #info1 {position:absolute; top:100px; left:100px;}  
#weltkarte #info2 {position:absolute; top:200px; left:200px;}  
#weltkarte #info3 {position:absolute; top:300px; left:300px;}  
-->  
</style>  
</head>  
<body>  
<h1>Weltkarte mit Markierungen</h1>  
<div id="weltkarte">  
 <img src="Beispiel.jpg" width="400" height="400" border="0" alt="" usemap="#worldnav">  
 <img id="info1" src="sub.gif" width="10" height="10" border="0" alt="">  
 <img id="info2" src="sub.gif" width="10" height="10" border="0" alt="">  
 <img id="info3" src="sub.gif" width="10" height="10" border="0" alt="">  
</div>  
<map name="worldnav">  
 <area shape="rect" coords="96,47,200,104" href="javascript:void(0);" title="Nordamerika" class="worldnavi">  
 <area shape="rect" coords="157,105,213,128" href="javascript:void(0);" title="Karibik" class="worldnavi">  
 <area shape="rect" coords="166,130,244,243" href="javascript:void(0);" title="Südamerika" class="worldnavi">  
 <area shape="rect" coords="277,30,370,89" href="javascript:void(0);" title="Europa" class="worldnavi">  
 <area shape="rect" coords="270,91,387,210" href="javascript:void(0);" title="Afrika" class="worldnavi">  
 <area shape="rect" coords="376,20,600,169" href="javascript:void(0);" title="Asien" class="worldnavi">  
 <area shape="rect" coords="486,169,600,242" href="javascript:void(0);" title="Australien" class="worldnavi">  
</map>  
</body>  
</html>

viele Grüße

Axel

Beitrag melden
–
Informationen zu den Bewertungsregeln