Fotos markieren und in DB speichern

[bumbumboris]

Hallo zusammen!

Ich habe folgendes Problem:

Ich würde gerne bei meiner Fotogallerie die Möglichkeit zur Verfügung stellen, dass ein bestimmter Bereich des Fotos markiert werden kann (kennt man z.B. aus verschiedenen Community's). Hat man den Bereich markiert (z.B. den Kopf der Person oder Ähnliches), kann man hierfür einen Text eingeben, der beim nächsten Aufrufen des Bildes ausgelesen wird. Es können auch mehrer Texte pro Bild ausgelesen werden.

Ich vermute mal, dass ich das mit einer Kombination aus PHP und Javascript machen muss. Vielleicht hat jemand diese Sache schon einmal umgesetzt und kann mir Hilfe oder Denkanstöße geben.

Vielen Dank im Voraus.

Gruß
BumBumBoris

[Montellese]

Also die Markierung auf dem Foto selber musst du mit JavaScript machen. Die Idee dabei ist, die Mausposition zu bestimmen und je nachdem, wo der User dann halt hinzieht, z.B. ein <div> Element, das bisher unsichtbar war (visibility: hidden) sichtbar macht und die Grösse und absolute Position mit jeder Mausbewegung, während zum Beispiel die linke Maustaste gedrückt ist, ändert/anpasst. Dem <div> gibt man dann z.B. einen roten Rahmen oder eine bestimmte Hintergrundfarbe und macht das es mit opacity halb-transparent. Wenn die Markierung abgeschlossen ist, musst du irgendwo (z.B. in einem Hidden-Input) die Position der Markierung speichern. Das kannst du auf verschiedene Arten machen. Am besten speicherst du die Koordinaten des Punktes links oben und des Punktes rechts unten. Daraus kannst du dann direkt Höhe und Breite etc berechnen. Und diese Werte speicherst du dann in eine Datenbank zusammen mit dem eingegebenen Text und der ID des Bildes. Beim Ausgeben kannst du dann wieder ein <div> machen, das einfach absolut im Bild platziert ist. Mit den Platzierungen etc musst du bissl rumspielen, damit es auch genau stimmt.

Ich habe mal für Herr der Ringe einen Atlas gemacht, bei dem ich alle möglichen Orte und Gebiete eingetragen habe, da habe ich sowas ähnliches programmiert. Hab die Markierfunktion aber nie perfektioniert ^^

Sag Bescheid, wenn du noch mehr Denkanstösse brauchst, etwas nicht verstanden hast oder einfach sonst Hilfe brauchst.

[bumbumboris]

Hi!

Zuerst einmal vielen Dank für Deine Antwort.

Was mir noch nicht so ganz klar ist, wie man es realisert, dass ein Rechteck geöffnet wird. Wahrscheinlich muss man dem user ein Button zur Verfügung stellen, den er dann anklicken kann. Dann kann er den Muaszeiger in das Bild setzen und dann mußt man abfragen, an welcher Position der die linke Taste drückt. Ist das so korrekt?

Hast Du vielleicht noch Javascript-Beispiele, wie man soetwas realisiert?

Gruß
BumBumBoris

[Montellese]

Einen Button brauchst du dazu nicht unbedingt, macht aber Sinn, damit bei einem versehentlichen Klick ins Bild nicht sofort eine Markierung gestartet wird.

Wenn der User also auf den Button "Markieren" klickt, setzt du eine globale variable auf true. Mit dem onmousedown-Event registrierst du die Klicks auf das Bild. Und mit dem onmousemove-Event (in dem du aber unbedingt überprüfen musst, ob die Maustaste gerade gedrückt ist und ob überhaupt markiert werden soll, weil das Event grundsätzlich immer feuert, sobald die Maus bewegt wird) kannst du dann rausfinden, wo sich die Maus gerade befindet.


Einen gut kommentierten und fertigen Code habe ich gerade nicht da, aber wenn du mal nach onmousedown, onmouseup und onmousemove googlest (am besten bei SELFHTML: JavaScript/DOM vorbeigucken) wirst du sicher einiges lernen. Ich kann dir hier noch die Funktion zur Bestimmung der Maus-Position anfügen:

function mousePos(ev) {
    ev = ev || window.event;

    return {document.all ? ev.clientX : ev.pageX, document.all ? ev.clientY : ev.pageY};
}

ev ist meistens das onmousemove Event. Damit das in allen Browsern richtig funktioniert, würde ich die mousePos-Funktion folgendermassen aufrufen:

document.onmousemove = mousePos;

und das ausserhalb von allen Funktionen am besten in einem window.onload.

Falls du noch (viele) weitere Fragen hast, kannst du mich auch gerne per PN oder über MSN kontaktieren.

PS: Beim verändern des <div>s musst du dir genau überlegen, wie du das machst, denn je nachdem, wo der User seine Markierung anfängt, ist der Startpunkt (dort wo er zum ersten Mal klickt) natürlich nicht gleich der Punkt links oben.... Muss man halt bissl rechnen und rumprobieren, damit es richtig funktioniert