Position eines Bildbereichs markieren

[flobee]

Hallo

Ich bin auf der Suche nach einer Javascript Funktionalität die mir in etwa das ermöglicht wie bei google-maps: Markieren und Speichern einer Position von einem Bildbereich.
Gibt es da etwas? Hilft prototype od. ähnliches?

Gruß Florian
--

[dr.colossos]

Hi,

du meinst auf ein <img> klicken, und dort soll dein ein, z.B. roter, Punkt erscheinen?

Prototype brauchst dafür nicht, hilft aber evtl. bei Browserabstraktion.

Ich würde mir mal die Event-Koordinaten bei einem Klick auf das Bild holen, z.B. so:
http://www.prototypejs.org/api/event/pointerX
Dann an dieser Position ein neues Element einfügen.

Wegen dem Speichern ... das geht von ganz primitiv mit hidden field, über Cookie, bis zu AJAX mit Datenbank-Synchronisation ... je nach dem was du willst und brauchst.

[flobee]

Hi,
Ich würde mir mal die Event-Koordinaten bei einem Klick auf das Bild holen, z.B. so:
http://www.prototypejs.org/api/event/pointerX

kannst du mir mit der verwendung nachhelfen?

  
function t(e) {  
x = Event.pointerX(e);  
alert(x);  
}  
<div id="imageitem">  
<img onclick="t(this);" src="bild.jpg}" border="0" vspace="5" />  
</div>  

Gruß Florian

[dr.colossos]

Hi,

xpos = Event.pointerX(e);

sollte passen.

Wenn's nicht geht, dann is wohl protoype.js nicht eingebunden.

[flobee]

Hi,

xpos = Event.pointerX(e);

sollte passen.

-->--
event is not defined
[Break on this error] x = Event.pointerX(event);
--<--
was ist denn "e" (event) ? die API sagt da nichts :-(

[dr.colossos]

Hi,

so sollte es gehen, sorry, hab's vorher übersehen.

<script>
function t(element, event) {
x = Event.pointerX(event);
alert(x);
}
</script>
<div id="imageitem">
<img onclick="t(this, event);" src="bild.jpg" border="0" vspace="5" />
</div>

Beim onclick musst du das event mitgeben, und folglich auch in der Parameterliste der aufzurufenden Funktion.

Nebenbei:
Das ist der Teil von prototype, der hier benutzt wird.
[...]
    pointer: function(event) {
      return {
        x: event.pageX || (event.clientX +
          (document.documentElement.scrollLeft || document.body.scrollLeft)),
        y: event.pageY || (event.clientY +
          (document.documentElement.scrollTop || document.body.scrollTop))
      };
    },

pointerX: function(event) { return Event.pointer(event).x },
    pointerY: function(event) { return Event.pointer(event).y },
[...]
Evtl. solltest dass einfach in einer eigenen Methode verpacken, und statt prototype verwenden, spart dir einiges!

Etwa so, analog für y:
// all credit goes to prototype.js developers
function getEventX(event)
{
     return event.pageX || (event.clientX +
          (document.documentElement.scrollLeft || document.body.scrollLeft))
}