Image Map

    Guten Abend,

    ich hätte mal ein Paar Fragen zu Image Maping.

    Zu meiner Aufgabenstellung:

    Ich möchte das ein registrierter Benutzer in seine Bereich einen Plan (Flucht- und Rettungsplan) hochladen kann.
    Das Bild dieses Planes soll dann (nur für Ihn) angezeigt werden.
    Das ist für mich auch noch kein Problem.

    Nun soll es dem User aber möglich sein die darauf verzeichneten z.B. Feuerlöscher anklickbar zu machen und Daten zu diesem Feuerlöscher zu hinterlegen.

    Meine Frage ist also wie kann ich den User ein Rechteck über den Bereich ziehen lassen, die Koordinaten ermitteln und diese dann abspeichern damit beim nächsten Anmeldevorgang noch alles vorhanden ist?

    Vielen Dank für eure Hilfe.

    Ja , kuck dir doch mal das an
    https://wiki.selfhtml.org/wiki/HTML/Mult…sitive_Grafiken
    Da kannst du zb Feuerlöscher und co mit anklickbar machen und somit auch Daten hinterlegen. Das man mit der Maus noch ein Extra Rechteck erstellen kann das geht bestimmt mit Canvas,ist aber nicht mein ding.
    Aber bei den Link ist es ja anklickbar und es sollte ja bestimmt auch so gehen .

    Die Daten dann zu speichern wäre ja mit Cookies oder Datenbank möglich jenachdem wie man sich das Vorgestellt hat

    Danke für deine schnelle Antwort.

    Die Seite hatte ich glaube auch schon gesehen. Mein Problem ist das, bei allen Lösungen die ich gefunden habe, ich die Bereiche erstellen und auf der Seite einbinden muss.

    Der User soll ein Bild hochladen und die Bereiche selbst festlegen können da diese ja nicht überall gleich sind.

    ja da ist wohl was dranne. Wie hast du dir das den gedacht?. Wenn deine Besucher die sachen bearbeiten ,wo willst du dasdann speichern ,auf einer Datenbank oder wie hast du das vor?. Wenn der User sich einloggt müßen die Daten ja auch wieder erreichbar sein.
    Ich denke mal das man das mit Php regeln könnte,das der User sich ein Bereich aussuchen kann und dann der Code mit Php in der Datenbank gespeichert wird. Beim aufrufen sollte dann das Bild so aussehen wie im Link.
    Ich bin zwar kein Php Profi aber das Versuche ich mal,das interesiert mich jetzt auch.

    Aber mit rechteckt ziehen mit der Maus könnte man sich mak bei Canvas umschaun. Damit sollte das wohl klappen,aber das wissen die Canvas Profis besser

    Ja ich muss quasi die Koordinaten auf dem bild ermitteln und dann in einer Datenbank speichern. Wie gesagt das abspeichern und wieder abrufen ist nicht das Problem sondern eher wie ich auf Mausklick die richtigen Koordinaten auf dem Bild ermittle.

    Da der User das selber im Browser machen soll, geht das nur Clientseitig mit Javascript.
    So trivial ist das aber nicht. Wenn man mit der Maus eine Koordinate im hochgeladenen Bild anklickt, wie legt man fest was jetzt definiert werden soll (rect, poly, circle)?
    Bei rect und circle würde das noch gehen, da die Anzahl der Parameter (Klicks) die folgen, als Definition herhalten können...

    rect -> 4 Parameter, also 4 Klicks nacheinander, danach muss ein Endebutton her
    circle -> 3 Parameter, also 3 Klicks nacheinander, danach muss ein Endebutton her

    Bei poly wird es fraglich, da ein Polyeder auch aus 3 oder 4 Parameter bestehen kann.

    Eine MAP zu erstellen ist schon mit Phase5² nicht simpel, arbeitsintensiv.

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    Probier es mal so.ob du das genau so machst musst du wissen. Aber so hast du die Pixel von Links und oben und kannst dann mit dem ersten Link die Verweise hinterlegen

    https://basti1012.bplaced.net/index.php?ordn…&name=Image_Map

    Vielleicht hilf dir das weiter. Ich würde dann jetzt das PHP dafür noch bauen und dann sollte das Grundgerüst doch stehen

    Der Code ist jetzt etwas durcheinander (js und JQuery ) ,Aber es soll ja nur zeigen wie man es machen könnte. Falls nötig werde ich es bearbeiten und das durcheinander beseitigen.

    Edit : habe das mal mit PHP und speichern versucht
    **Link entfernt, weil Seite nicht mehr erreichbar **

    Wenn ich das mit den vievbox verstehen würde könnte ich es bestimmt besser machen.Nur verstehe ich da nicht warum die Quadrate größer und kleiner werden, wenn ich die Bildgröße ändere ,oder je weiter ich es unten speichern will, um so höher verschiebt sich das und so weiter. Komisches Zeug. ganz links oben passt noch alles. Aber wenn man das Verstehen tut, geht das bestimmt auch perfekt. Aber wie man sieht dein Vorhaben ist eigentlich recht gut umsetzbar und dass man die Quadrate selber ziehen kann, sollte ja auch nicht das Problem werden