SELFHTML Forum  SELFHTML Forumsarchiv  2007  Dezember

	SELFHTML Forumsarchiv Position eines Bildbereichs markieren
	(JAVASCRIPT) Position eines Bildbereichs markieren von flobee, 29. 12. 2007, 20:13  (JAVASCRIPT) Position eines Bildbereichs markieren von dr.colossos, 29. 12. 2007, 22:39  (JAVASCRIPT) Position eines Bildbereichs markieren von flobee, 29. 12. 2007, 23:22  (JAVASCRIPT) Position eines Bildbereichs markieren von dr.colossos, 29. 12. 2007, 23:34  (JAVASCRIPT) Position eines Bildbereichs markieren von flobee, 30. 12. 2007, 01:39  (JAVASCRIPT) Position eines Bildbereichs markieren von dr.colossos, 30. 12. 2007, 04:41

Position eines Bildbereichs markieren

Die folgende Nachricht zum Thema stammt von: flobee, 29. 12. 2007, 20:13

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
--

Position eines Bildbereichs markieren

Die folgende Nachricht zum Thema stammt von: dr.colossos, 29. 12. 2007, 22:39

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.

Position eines Bildbereichs markieren

Die folgende Nachricht zum Thema stammt von: flobee, 29. 12. 2007, 23:22

»» 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

Position eines Bildbereichs markieren

Die folgende Nachricht zum Thema stammt von: dr.colossos, 29. 12. 2007, 23:34

Hi,

xpos = Event.pointerX(e);

sollte passen.

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

Position eines Bildbereichs markieren

Die folgende Nachricht zum Thema stammt von: flobee, 30. 12. 2007, 01:39

»» 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 :-(

Position eines Bildbereichs markieren

Die folgende Nachricht zum Thema stammt von: dr.colossos, 30. 12. 2007, 04:41

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))
}

 SELFHTML Forum  SELFHTML Forumsarchiv  2007  Dezember

© 1998-2006  Impressum, Software: Classic Forum