map und area shape / Grafik

[luigee]

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 :-(

So sieht mein Code aus:

<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>
</div>

<div style="zindex:0;">
  <img src="img/earth/world.gif" usemap="#worldnav">
</div>

<!--
Diese Grafik will ich jetzt z.B. auf die world.gif Grakif legen an einer bestimmten Stelle:
 -->
     <img src="game/img/info.gif" alt="info">

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

Danke.

[Gernot Back]

Hallo luigee,

Jetzt will ich auf bestimmten Punkten aber auch noch eine Grafik (z.B. Info.gif) an bestimmten Stellen auf der Grafik anlegen.

Wenn du dich mit dem Mauskoordinaten-Auslesen noch schwer tust, kannst du es auch so lösen:

http://www.landgard.de/standorte.html

Einfach einen blinden Pixel in entsprechenden Dimensionen über eine Hintergrundgrafik legen, diesem auch das usemap-Attribut zuweisen und dann onmouseover durch eine andere teiltransparente Grafik austauschen.

Eine ordentliche Variante mit Auslesen absoluter Mauskoordinaten und einer einzigen viel kleineren Flaggen-Grafik habe ich für obiges Projekt im Rahmen eines Praktikums auch gebaut, aber die wurde leider nie veröffentlicht. Da könntest du dann auch entsprechende Texteinblendungen haben. Fürs Highlighten bestimmter Länder finde ich aber die obige Methode geeigneter, oder jene von Peter S.

http://forum.de.selfhtml.org/archiv/2005/4/t105405/#m651945

Ich weiß ja nicht, welche Art von Einblendung du konkret vorhast.

Gruß Gernot

[luigee]

Hallo Gernot,

erstmal danke für die Antwort.

Sehr interessant was Du mir da gezeigt hast. Aber ich will einfach nur statische Grafiken auf meiner Weltkarte anzeigen. Also nicht unbedingt, wobei auch im Nachhinein vielleicht sehr nützlich, die Mauskoordinaten auslesen um dann dort eine Grafik anzuzeigen.

Es geht sich wohl eher um einen DIV Verständnis Problem bei mir.

Also ich habe eine Grafik Weltkarte. Will nun z.B. auf den Bereich Deutschland einfach eine andere Grafik legen. Doch irgendwie komme ich mit den DIV Containern nicht klar.

Ich dachte nur zuerst das es irgendwie mit dem area shape geht aber warum so kompliziert? Wie kann ich denn, anhand meines Codes, eine Grafik über die:

<img src="img/earth/Erdkarte.gif" usemap="#worldnav">

legen? Also meine:

<img src="game/img/info.gif" alt="" usemap="#worldnav">

soll einfach über der "Erdkarte" sein, in Positon Deutschland z.B.
Wie stell ich das an?

Hallo luigee,

Jetzt will ich auf bestimmten Punkten aber auch noch eine Grafik (z.B. Info.gif) an bestimmten Stellen auf der Grafik anlegen.

Wenn du dich mit dem Mauskoordinaten-Auslesen noch schwer tust, kannst du es auch so lösen:

http://www.landgard.de/standorte.html

Einfach einen blinden Pixel in entsprechenden Dimensionen über eine Hintergrundgrafik legen, diesem auch das usemap-Attribut zuweisen und dann onmouseover durch eine andere teiltransparente Grafik austauschen.

Eine ordentliche Variante mit Auslesen absoluter Mauskoordinaten und einer einzigen viel kleineren Flaggen-Grafik habe ich für obiges Projekt im Rahmen eines Praktikums auch gebaut, aber die wurde leider nie veröffentlicht. Da könntest du dann auch entsprechende Texteinblendungen haben. Fürs Highlighten bestimmter Länder finde ich aber die obige Methode geeigneter, oder jene von Peter S.

http://forum.de.selfhtml.org/archiv/2005/4/t105405/#m651945

Ich weiß ja nicht, welche Art von Einblendung du konkret vorhast.

Gruß Gernot

MfG

LuiGee

[luigee]

Das ganze soll halt nicht absolute sein, sondern sich schon an der Grafik orientieren die darunter liegt.

Darin liegt glaube ich mein eigentliches Problem.

Das ganze absolut festzulegen ist eigentlich kein Theme. Jedoch soll die kleine Grafik sich innerhalb der "Mutter" Grafik befinden und sich daran positionieren.

[Gernot Back]

Hallo luigee,

Das ganze absolut festzulegen ist eigentlich kein Theme. Jedoch soll die kleine Grafik sich innerhalb der "Mutter" Grafik befinden und sich daran positionieren.

Na dann leg doch ein Objekt für jedes einzelne Land an mit x- und y-Koordinaten als Eigenschaften an, und onmouseover rufst du dann mit diesem Objekt als Übergabepartameter eine Funktion auf, die deine Einblendung an passender Stelle durch Addition der Werte deines Standsdortobjekts zur absoluten Position deiner Weltkarte relativ positioniert.

Gruß Gernot

[Axel Richter]

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