Image Mauskoordinaten auslesen und Bild + Text einfügen

[Trolleule]

Ahoy,

ich habe bisher noch nicht mit javascript gearbeitet. Ich möchte auf einer HTML Seite ein Bild ausgeben (Deutschlandkarte) und dann über einen Linksklick an Mausposition ein Bild setzen z.B. ein Pin/Stecknadel, zusätzlich dann noch die Möglichkeit haben einen Text/Namen einzugeben. Der Name wird dann beispielsw. unter das Bild gesetzt.

Das Problem ist, das Ganze macht erst Sinn wenn sich auch mehrere User darin eintragen können, sage ich mal, was aber vorraussetzt das die Objekte nach aktuallisieren des Browsers nicht verloren gehen, sprich in irgendeiner Art gespeichert werden.

Das habe ich bisher:

<div><img id="bild" src="bild.jpg"></div>  
  
<script type="text/javascript">  
  
var karte = document.getElementById('bild');  
karte.onclick = function(e) {  
    var m = mouse(e);  
    var img = document.createElement('img');  
    img.src = 'dot.gif';  
    img.style.position = 'absolute';  
    img.style.top = m.top + 'px';  
    img.style.left = m.left + 'px';  
    document.body.appendChild(img);  
};  
  
function mouse(e) {  
    if(!e) e = window.event;  
    var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?  
    window.document.documentElement : window.document.body || null;  
  
    var mouse = {};  
  
    // Position im Dokument  
    mouse.top = e.pageY ? e.pageY : e.clientY + body.scrollTop;  
    mouse.left = e.pageX ? e.pageX : e.clientX + body.scrollLeft;  
  
    return mouse;  
}  
</script>  

Das Schlimme ist ich habe überhaupt keine Ahnung, ich kann mich nicht mal dran erinnern jemals im Internet gesehen zu haben das Bilder o.ä., die durch eine Funktion oder so erstellt wurden, in irgend einer Weise gespeichert wurden, oder bin ich jetzt verrückt?

Ich weiss nicht mal wonach ich suchen soll :/

Ich bedanke mich schon mal vielmals.

[JürgenB]

Hallo Trolleule,

... sprich in irgendeiner Art gespeichert werden.

das geht nicht mit Javascript alleine, ich glaube, das geht sogar ohne. Dazu benötigst du serverseitige Techniken und einen Provider, der diese auch unterstützt. Stichworte sind CGI, Formularverarbeitung, PHP oder eine andere Sprache, evtl. auch AJAX/httpRequest.

Gruß, Jürgen

[Trolleule]

Erstmal Danke für euere Mühen.

@Marco
Hinter deiner Lösung steckt eine Idee, welcher ich nicht ganz folgen kann.
Ich hab dann das Bild mit 1x1 Pixel überdeckt die als Link dienen können. Ich finde leider keine passende Schnittstelle zu meinem Problem.
Vielleicht könntest du deine Idee etwas detailierter ausmalen.

@Vinzenz Mai
Danke für die Info.

@molily
Wenn ich das richtig verstehe soll ich per php die Mauskoordinaten für jeden einzelnen Submit speichern
und die Pins, also die kleinen Bilder dann dynamisch an die Position der gespeicher. Mauskoordinaten setzen. D. h.  beim laden der Seite werden die Koordianten angefordert und noch vor der Ausgabe werden die Benutzerdaten, Bild + Name an die Koordinaten angehangen.
Ist das so ungefähr richtig?

@JürgenB
Vermutlich das was ich oben versuche zu verdeutlichen.

Kurz noch was zu meinem Problem um das Verständnis zu verbessern:
Praktisch gesehen suche ich eine Pinmap auf der sich mehrere User über ihren Namen auf der Karte lokalisieren lassen. Die Pins dienen nur der Übersicht.

Echt nett von euch, schon mal Vielen Dank.
Würde mich über weitere Infos freuen.

[Struppi]

Kurz noch was zu meinem Problem um das Verständnis zu verbessern:
Praktisch gesehen suche ich eine Pinmap auf der sich mehrere User über ihren Namen auf der Karte lokalisieren lassen. Die Pins dienen nur der Übersicht.

Das kannst du alles mit Googlemaps

Struppi.

[Trolleule]

Ok Danke für die Infos. Also auf Google Maps möchte ich verzichten. Ich würde das gerne selber programmieren.

Ich schau mir grade das PHP Tutorial von selfhtml an, um schon mal einen Überblick über php zu bekommen.
Also Mauskoordinaten auslesen wird überwiegend mit js gemacht, nach dem Shema wie in meinem ersten Post.
Die Frage ist: Könnte ich denn auch per js die Mauskoordinaten auslesen und die über eine onClick Funktion an $_GET übergeben?

Links oder Stichwörter wären auch hilfreich.

@molily
Zu deinem Konzept habe ich auch was gefunden, wo ich kein js für benötige, aber ich kann mir das nicht in der Praxis vorstellen. Wie sieht das dann auf User Seite aus?

Danke schon mal

[molily]

Könnte ich denn auch per js die Mauskoordinaten auslesen und die über eine onClick Funktion an $_GET übergeben?

Ja, kannst du, weil du mit JavaScript HTTP-Requests an den Server senden kannst und im Falle eines GET-Requests natürlich Daten im Query-String (/pfad/zu/script.php?x=123&y=456) mitsenden kannst.

Methoden dazu sind XMLHttpRequest oder einfach new Image.

Zu deinem Konzept habe ich auch was gefunden, wo ich kein js für benötige, aber ich kann mir das nicht in der Praxis vorstellen. Wie sieht das dann auf User Seite aus?

Die Frage verstehe ich nicht, was willst du genau wissen?
Er sieht eine Grafik und kann drauf klicken, dann wird das Formular abgesendet und in der Serverantwort sieht er schon einen Pin auf der Stelle, die er angeklickt hat.

Mathias

[Trolleule]

Ich glaube ich weiss jetzt wie du das meinst:
Also das Konzept von Marco mit den transparenten 1x1 Pixel, wobei die Bilder Submit Buttons darstellen und ich seh gerade die übergeben:
http://.../auswerten.php?x=67&y=9

<form action="auswerten.php">  
<input type="image" src="absende.gif" alt="Absenden">  
</form>

dann kann ich die in eine variable speichern:

<php?  
$posx = $_GET['x'];  
$posy = $_GET['y'];  
  
echo $posx."\n";  
echo $posy;  
?>

Also speichern funktioniert schon mal.
Die Frage ist wie gehts weiter? ^^

Schon mal Vielen Dank!

[ChrisB]

Hi,

Also das Konzept von Marco mit den transparenten 1x1 Pixel

... ist ziemlicher Murks.

wobei die Bilder Submit Buttons darstellen und ich seh gerade die übergeben:
http://.../auswerten.php?x=67&y=9

Wenn du das ganze Bild als input type=image einsetzt, kommst du nach dem Absenden des Formulars ebenso an die Koordinaten, wo auf dem Bild geklickt wurde. Und das, ohne hunderte 1*1 Pixel grosse "Submitbuttons" ueber dem Bild platzieren zu muessen.

Also speichern funktioniert schon mal.
Die Frage ist wie gehts weiter? ^^

Gespeicherte Koordinaten auslesen, und damit kleine Bildchen/Elemente ueber der Grafik positionieren - schrieb Mathias doch schon.

MfG ChrisB

[Trolleule]

Verstehe, leichter gesagt als getan, das zu programmieren, damit habe ich schwierigkeiten. Hast du einen passenden Link oder einen Quellcode ^^.

Thanks

[ChrisB]

Hi,

Verstehe, leichter gesagt als getan, das zu programmieren, damit habe ich schwierigkeiten. Hast du einen passenden Link oder einen Quellcode ^^.

Passender Link.

Wenn du Hilfe willst, dann beschreibe *konkret*, womit du Probleme hast. Nur "boah ey, alles zu hoch fuer mich" hilft weder dir noch uns weiter.

Ich wuerde vorschlagen, dass du dich zuallererst mal zum Thema Positionierung mit CSS beliest.

MfG ChrisB

[Trolleule]

Ich versuch mich jetzt schon an html/PHP/JS, bin ein bisschen überfordert, aber als Resumé:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Beschreibung der Seite</title>  
</head>  
<body>  
  
 <form action="auswerten.php">  
  <input type="image" src="karte.jpg" alt="Absenden">  
 </form>  
  
  
</body>  
</html>

Auswerten.php
-------------

<?php  
  
$posx = $_GET['x'];  
$posy = $_GET['y'];  
  
echo $posx."\n";  //Zum testen!  
echo $posy;  
  
?>

Ich muss jetzt das Bild an die Koordinaten x, y knüpfen, wie weiss ich aber noch nicht. Dann wäre noch die Frage wofür der Link CSS - position. Ich bekomm absolute Koordinaten.

Danke

[ChrisB]

Hi,

<form action="auswerten.php">
  <input type="image" src="karte.jpg" alt="Absenden">

$posx = $_GET['x'];
$posy = $_GET['y'];

echo $posx."\n";  //Zum testen!
echo $posy;

Nein, das wird so nicht funktionieren.
Informiere dich, wie man input type=image in PHP verarbeitet.

Ich muss jetzt das Bild an die Koordinaten x, y knüpfen, wie weiss ich aber noch nicht. Dann wäre noch die Frage wofür der Link CSS - position. Ich bekomm absolute Koordinaten.

Du kommst die Koordinaten, wo auf das Bild geklickt wurde, in Bezug auf die obere linke Ecke des Bildes. Also positioniere auch in Bezug auf diese.

MfG ChrisB

[Trolleule]

Hmm das funktioniert ^^.
Das Bild ist das einzie was ich im body bisher anzeige.
Die ausgabe wenn ich oben links in die Ecke klicke, ergibt 16 15.
Das sind doch die Koordinaten die wir suchen.

[Trolleule]

Wenn das nicht richtig ist, dann brauch ich eine andere Lösung. Ich bräuchte einen Überblick welche Möglickeiten ich habe, das umzusetzen, aber mit einem kurzen Ablauf (z.B. die Korrdinaten so und so auslesen und dann speichern...), damit ich weiss wie ich vorgehen muss.

Danke

[molily]

Wenn das nicht richtig ist, dann brauch ich eine andere Lösung.

Wo ist das Problem bei dieser Lösung?

Ich bräuchte einen Überblick welche Möglickeiten ich habe, das umzusetzen, aber mit einem kurzen Ablauf (z.B. die Korrdinaten so und so auslesen und dann speichern...), damit ich weiss wie ich vorgehen muss.

Wo hapert es genau? Dein Beispiel war doch schon ganz richtig. Jetzt brauchst du nur noch die serverseitige Speicherung und die Ausgabe.

Serverseitig speichern kannst du in einer SQL-Datenbank, sqlite, Textdatei mit serialisiertem Array usw. usf. Da musst du dich für eine angemessene Umsetzung entscheiden. Am besten nimmst du die Lösung, die du vielleicht schon kennst.

Was die Augabe und Positionierung angeht, so gehst du den beschriebenen Weg mit absolut-relativ positionierten Elementen, die dann über der Karte erscheinen.

Inwiefern weißt du nicht, wie du vorgehen musst?

Mathias

[Trolleule]

Ahh erstmal danke für deine ausführliche Erklärung.
Dein Vorgänger sprach davon, dass das so nicht funktioniert, deshalb war ich ein wenig geknickt.
Es hapert eigentlich am programmiertechnischen. Also Datenbank ist unnötig, daher die Werte in eine Textdatei zu speichern und desweiteren den Pin(bild) an die Koordianten zu knüpfen, zusätzlich noch die Ausgabe eines Namens unter dem Pin oder beim Mouseover vom Pin den Namen anzeigen der irgendwo dazwischen eigegeben werden kann.

[ChrisB]

Hi,

Dein Vorgänger sprach davon, dass das so nicht funktioniert, deshalb war ich ein wenig geknickt.

Du hattest dem Submit-Image in deinem Beispiel keinen Namen gegeben, und dann einfach auf $_GET['x'] bzw. y zugegriffen - so macht man das normalerweise nicht, und dass es funktioniert, halte ich fuer Zufall.

MfG ChrisB

[Trolleule]

jo ist ja nicht der rede wert. Ich hab mich mich mal erkundigt, Daten in eine Textdatei zu speichern, jetzt kann ich genauere Angaben machen.

Ich möchte ja gerne, dass sich beim Klicken, außer der Ausgabe eines Bildes, ein Textfeld öffnet, in welchem man seinen Nickname eintragen kann.
An der Stelle würde ich gerne wissen wie ich das machen soll. Dann geh ich mal davon aus, dass der Name hinterher in einer variable steht. Der Name muss den Koordinaten zugeordnet sein, also muss ich die auch dementsprechend speichern. Die Frage ist welches Format:

X-Koordinate | y-Koordinate | Name

Gibt es sinvollere Alternativen bzgl. des Formates?

Was mir noch Probleme bereitet ist die Ausgabe oder besser gesagt die Darstellung, weil ich nichts habe an dem ich mich orientieren kann. Hier auch die Frage welche Möglichkeiten habe ich. Mir bekannt ist ein mouseover mit popup-fenster, wo dann der name drin steht oder halt der Name steht permanent unter/neben/über dem Bild.

[Trolleule]

ihr könnt es doch...^^

[molily]

Ich muss jetzt das Bild an die Koordinaten x, y knüpfen, wie weiss ich aber noch nicht. Dann wäre noch die Frage wofür der Link CSS - position. Ich bekomm absolute Koordinaten.

position:relative für das Elternelement, position:absolute für die Pin-Elemente - so kannst du die Pin-Elemente relativ zum Element positionieren, das das Bild beinhaltet.

Mathias

[molily]

Wenn ich das richtig verstehe soll ich per php die Mauskoordinaten für jeden einzelnen Submit speichern und die Pins, also die kleinen Bilder dann dynamisch an die Position der gespeicher. Mauskoordinaten setzen.

Ja, damit habe ich dir wohl nichts Neues gesagt.

D. h.  beim laden der Seite werden die Koordianten angefordert

Du kannst auch direkt serverseitig Elemente mit der entsprechenden Position in den Quelltext schreiben (position:relative für das Elternelement, position:absolute für die Pin-Elemente).

Mathias

[molily]

Wenn du grafische Submit-Buttons verwendest, werden beim Absenden die Klick-Koordinaten mitgeliefert (in den Parametern x und y, wenn ich mich recht entsinne). So kannst du das ganze schon einmal ohne JavaScript lösen.

Mit JavaScript interessiert dich weniger die Mausposition relativ zum Dokument bzw. Viewport, sondern zum Bild. Das geht in einigen Browsern mittels http://de.selfhtml.org/javascript/objekte/event.htm#layer_x_y@title=layerX/Y, in anderen musst du die Position des Bildes von der Mausposition abziehn, um die relative Mausposition zu bekommen. Die kannst du dann wie gesagt mit XMLHttpRequest o.ä. an den Server senden und dort speichern.

Mathias

[Vinzenz Mai]

Hallo,

Das Schlimme ist ich habe überhaupt keine Ahnung, ich kann mich nicht mal dran erinnern jemals im Internet gesehen zu haben das Bilder o.ä., die durch eine Funktion oder so erstellt wurden, in irgend einer Weise gespeichert wurden

Google Maps?

Freundliche Grüße

Vinzenz

[Marco]

Ich würde hier komplett auf JS verzichten.
Du kannst das Ganze auch komplett mit ein wenig PHP realisieren:

Leg die Deutschlandkarte in den Hintergrund (des DIVs). Darüber legst du einfach ganze viele transparente 1x1 Pixel große Bilder, die als Links dienen:

  
<?  
$breite = 800;  
$hoehe = 600;  
  
for ($x = 1; $x <= $breite; $x++) {  
  for ($y = 1; $y <= $breite; $y++) {  
    echo '<a href="verarbeiten.php?x='.$x.'&y='.$y.'"><img src="trans.gif" width="1" height="1" border="0"></a>';  
  }  
}  
?>  

In verarbeiten.php kannst du dann die Koordinaten x und y nehmen und nach Wahl abspeichern (Textdatei, MySQL-Datenbank etc.)

[Struppi]

Das Problem ist, das Ganze macht erst Sinn wenn sich auch mehrere User darin eintragen können, sage ich mal, was aber vorraussetzt das die Objekte nach aktuallisieren des Browsers nicht verloren gehen, sprich in irgendeiner Art gespeichert werden.

Das habe ich bisher:

... in einem anderen Forum gezeigt bekommen.

Ich finde, dafür dass du so etwas recht aufwendiges konkretes willst, ist deine eigene Vorarbeit relativ gering.

Struppi.