• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

"aktive" grafik mit koordinatensystem

S

Schlappohr1

New member
hi leute,

also...ich möchte gern eine kleine grafik, in meinem fall ein teil der weltkarte z.b berlin, auf einer html seite darstellen...soweit so gut.
jetzt soll der nutzer aber auf diese karte, auf eine belibige stelle, klicken können und in zwei textfeldern sollen dann die koordinaten ausgegeben werden...
also mein problem ist, das ich nicht weiss wie ich die grafik mit einem koodinatenystem/raster "überziehen" kann...wie funktioniert sowas? :confused:

könnt ihr mir bei diesem problem helfen????

schlappohr
 
Moin!
Schlappohr1 schrieb:
also mein problem ist, das ich nicht weiss wie ich die grafik mit einem koodinatenystem/raster "überziehen" kann...wie funktioniert sowas?
Zum Vergrößern anklicken....
Falls Du Mauskoordinaten meinst: da brauchste nix zu überziehen. Die kann man sich mit einem kleinen Script greifen. Solltest Du, was ich bei einer Weltkarte für naheliegend halte, Geo-Koordinaten meinen wird's allerdings ein wenig haarig (abhängig von der verwendeten Projektion).

Übrigens: nach weniger als 2 1/2 Stunden zappelig zu werden zeugt nicht nur von Ungeduld, sondern wird hier auch nicht gern gesehen.

Ahoi - Pit
 
ich glaube es würde auch reichen zunächst die mauskoordinaten zu bestimmen. wenn ich die habe kann ich die doch sicherlich umrechnen...das die koordinaten stimmen oder?

ich dank dir für den tip (mauskoordinate)
ich werds mal probieren, mal sehen ob ichs hinbekomme :rolleyes:

mfg
schlappohr
 
ok,ich habe hier im forum ein beispielcode gefunden, aber ich bekomm das nicht hin

so sieht mein html code aus:

HTML: 
html>
 <head>
  <title>ERAMAS - v0.4</title>
  <link rel="stylesheet" href="css/style.css"> 
 </head>


 <body background="pics/background_blue.JPG">
  <span style="position: absolute; left: 0; top: 0; z-index:1"><img src="pics/back_top.JPG"></span>
  <span style="position: absolute; left: 0; top: 159; z-index:1"><img src="pics/back_left.JPG"></span>
  <span style="position: absolute; left: 80; top: 220; z-index:1"><img src="pics/first_c_0200.gif"></span>
  <p class="titel" align="left">TEST-System</p>
 
  <a href="Home.html" class="text1"><span style="position: absolute; left: 300; top: 135">Home</span></a>
 
  <a href="Beschreibung.html" class="text1"><span style="position: absolute; left: 400; top: 135">Was ist das?</span></a>
 
  <a href="test.html" class="text1"><span style="position: absolute; left: 600; top: 135">Test</span></a>
 
  <a href="Kontakt.html" class="text1"><span style="position: absolute; left: 800; top: 135">Kontakt</span></a>
 
  <p class="text2"><span style="position: absolute; left: 400; top: 170">Bitte geben Sie Ihre gewünschten Daten ein</span></p>
 
  <form name="Input" onsubmit="check()">
   <p class="text2"><span style="position: absolute; left: 420; top: 220">Windrichtung <input type="text" name="wind" value="0" size="4" maxlength="3"> Grad</span></p>
   <p class="text2"><span style="position: absolute; left: 420; top: 260">Windstärke <input type="text" name="speed" value="0" size="4" maxlength="3"> m/s</span></p>
   <p class="text2"><span style="position: absolute; left: 490; top: 540"><input type="submit" name="start" size="6" value="Simulation start"></span></p> 
   
   <p class="text2"><span style="position: absolute; left: 420; top: 300">Ort</span></p>
   <span style="position: absolute; left: 420; top: 330; z-index:1"><img src="pics/karte3.JPG"</span>
   <p class="small"><span style="position: absolute; left: 710; top: 330">x <input type="text" name="x" value="0" size="10" maxlength="9"></span></p>
   <p class="small"><span style="position: absolute; left: 710; top: 360">y <input type="text" name="y" value="0" size="10" maxlength="9" enabled="false"></span></p>
  </form>
 
 
 </body>
</html>

könnte mir jemand dabei helfen? :confused:
ein javascript habe ich schon drin, hab es aber der übersichthalber weggelassen.

mfg
das schlappohr
 
Zuletzt bearbeitet:
:D ich habe die ersten erfolgserlebnisse...

zumindest wird die mauskoordinate auf der gesamten seite angezeigt...jetzt muss die sache "nur" noch auf das bild beschrenkt werden

nochmal danke @ pit-r :rolleyes:

mfg
schlappohr
 
Moin!
wumble schrieb:
Ich glaube dies könnte dir weiterhelfen:

map
Zum Vergrößern anklicken....
Nö - das hilft Schlappohr1 nicht:
Schlappohr1 schrieb:
jetzt soll der nutzer aber auf diese karte, auf eine belibige stelle, klicken können und in zwei textfeldern sollen dann die koordinaten ausgegeben werden...
Zum Vergrößern anklicken....
oder soll für jeden Pixel ein Area erstellt werden?

Ahoi - Pit
 
pit-r schrieb:
Moin!Nö - das hilft Schlappohr1 nicht:eek:der soll für jeden Pixel ein Area erstellt werden?
Zum Vergrößern anklicken....

Theoretisch könnte man das wohl so machen :D
aber so prickelnd ist das wohl wirklich nicht, naja hatte ich wohl nicht genau hingeschaut :rolleyes:
 
yippi, habs geschaft :D

ich habe lasse mir die koordinaten mit einem onclick"" in mein textfeld schreiben...
zuvor ziehe ich die die position des bildes von den koordinaten ab, rechne diese so um wie ich sie brauche und dann klappts :)
ist vielleicht nicht die hüpscheste und eleganteste lösung aber sie funktioniert, ich werde dann wohl später nochmal dran rumbasteln....

großes dankeschön an alle dir mir geholfen haben

das schlappohr :eek:
 
hi leute, ich habe den rest soweit fertig bi aber auf ein problem gestoßen.

wie oben schon versucht habe zu erklären ermittel ich die koordinatn auf der karte indem ich die lage des bildes auf der seite berücksichtige.
kurz: koordinate= gesamtx - postionx-des bildes

da es aber abweichungen von rechner zu rechner, browser zu browser und und und gibt, möchte ich gern das das bild direkt mit der koordinate 0/0 anfängt und nicht mit der wo es auf der seite liegt.

habe gedacht das wäre mit diesem code getahn aber das klappt bei nicht...immernoch das gleiche problem

HTML: 
var x, x2, y, y2;
ie=(typeof(document.all)=='object');
function koordinaten(e){
x=e.clientX;
y=e.clientY
if(e.target){
x2=x-e.target.offsetLeft+document.body.scrollLeft;
y2=y-e.target.offsetTop+document.body.scrollTop;
}
else{
x2=e.offsetX;
y2=e.offsetY;
}
document.form1.mc.value = x2
document.form1.mc.value = y2
}

kann mir jemand sagen was ich falsch mache?

bis denn dann und danke an euch

Schlappohr
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben