[Erledigt] Koordinaten auf Bild per klick

Screeze · 28.02.2009, 14:30

Ich hab schon unseren Lieblingsfreund google bemüht, aber da kommt ausnahmsweise nix brauchbares bei raus.

Und zwar habe ich ein Bild (feste höhe+breite) und müsste per Klick auf das Bild die Koordinaten ermitteln, aber nicht von der gesamten seite, sondern die koordinaten der position auf dem Bild, mit denen ich dann weiterarbeiten kann (berechnungen + anzeige auf dem bild + ...)
und zwar ohne dass die seite abgeschickt wird, (habe da ein paar lösungen mit <input type=image...> gefunden, das beim abschicken die koordinaten mitliefert.

Ich finde leide keiner passende funktion dafür, kann mir da jemand einen tipp geben?

Manko10 · 28.02.2009, 16:58

Hallo,

du kannst die Mauskoordinaten auslesen und dann die Position des Bildes auf der Seite davon abziehen. Klingt einfach, ist aber etwas aufwendiger, da das Bild nicht unbedingt absolut im BODY positioniert ist und das Auslesen von myImage.style.left und myImage.style.top nicht reicht. Ein JavaScript-Framework deiner Wahl sollte dir aber helfen können.

Screeze · 28.02.2009, 17:57

hmm ne ein framework kommt nicht in frage in dem fall.

hmm das bild is relativ positioniert.

Da das bild in einem eigenen div-container sitzt, wäre es auch denkbar die position davon / die position des klicks auf dem div zu ermitteln.
Gäbs da ne möglichkeit?

agrajag · 28.02.2009, 18:03

Nicht das ich wüsste. Beim onClick-Event werden nunmal nicht die Koordinaten des Klicks relativ zum Elternelement übergeben...
Das musst du dir - wie Manko schon gesagt hat - dann schon selbst ausrechnen. Und ich vermute mal da wirst du dir noch die Haare raufen, da es da doch einige Unterschiede bei den Browsern gibt, wie du den Offset/die Position eines Elements ermitteln kannst...

Frameworks to the rescue

nikosch · 28.02.2009, 18:04

Notfalls ein Iframe als Ziel der Form-Action

dille001 · 28.02.2009, 18:54

.... zumindest der 7er:

Code:

<script type="text/javascript">
function getco(e)
{
alert('Bild left: ' + document.getElementById("bild").offsetLeft + ' top: ' + document.getElementById("bild").offsetTop);
alert('Event left: ' + e.screenX + ' top: ' + e.screenY);
}
</script>
<style type="text/css">
img {margin: 40px;}
</style
</head>
<body margin="0" padding="0">
<div name="div1" style="margin: 20px;">
<div name="div2" style="margin: 20px;">
<img onclick="getco(event);" id="bild" name="bild" src="http://www.buechertransportdienst.de/pics/karte.gif">
</div>
</div>
</body>

... mit den Werten kannste dann rechnen, wo auf dem Bild geclickt wurde.
Opjepaast: der IE zeigt die Left-Werte immer um 2 erhöht an (Warum?)

Dirk

Screeze · 28.02.2009, 19:33

hmm na gut wird die einzige möglichkeit sein, schau ich mir später dann mal an und geb rückmeldung

Screeze · 01.03.2009, 19:42

ok also hab mal mir dem code con dille rumgespielt (im FF), aber eins is komisch:

Ich hab mal die ganzen divs und margins entfernt, und den code so angepasst:

Code:

<html>
<head>
<script type="text/javascript">
function getco(e)
{
    alert('Bild left: ' + document.getElementById("bild").offsetLeft + ' top: ' + document.getElementById("bild").offsetTop + '\n Event left: ' + e.screenX + ' top: ' + e.screenY + '\n Berechnung: \n links:' + (e.screenX - document.getElementById("bild").offsetLeft) + ' oben:' + (e.screenY-document.getElementById("bild").offsetTop) );
}
</script>
</head>
<body margin="0" padding="0">
<img onclick="getco(event);" id="bild" name="bild" src="img/worldmap.jpg">
</body>

Wenn ich in die linke obere ecke vom bild geklickt habe, kommt das raus:

Zitat:

Bild left: 8 top: 8
Event left: 8 top: 139
Berechnung:
links:0 oben:131

wobei berechnung dann meiner meinung nach die koordinaten auf dem bild darstellen müssten.
aber schon bei event top, die 139 können nicht stimmen, das is genauswo weit von oben wie von links entfernt (8 pixel), wieso 139??

edit: Im IE 7, das gleiche, er scheint die symbol und lesezeichenleisten ect. mitzurechnen, wenn ich da eine wegmache is der wert gleich viel kleiner. wie krieg ich den wert ohne die leisten?

Screeze · 01.03.2009, 19:52

ok habs gefunden,
mit

Code:

e.clientX
e.clientY

bekomm ich die richtigen werte.

jetz muss ich nurnoch ne browserweiche finden, dass ich im IE 2 abziehen kann, dann passts

danke

edit: sowohl bei clientY, clientX, als auch bei den offsets, zählt der IE grundsätzlich 2 dazu...

Manko10 · 01.03.2009, 19:56

Zitat:

jetz muss ich nurnoch ne browserweiche finden

Versuche mal

Code:

if (document.all) {

}

Wobei ich jetzt gerade nicht weiß, ob der Firefox mittlerweile nicht auch drauf anspricht. Seit ich jQuery nutze, habe ich mit Browserweichen fast nichts mehr am Hut.

Beitrag editiert:
[…] Hmm, laut SelfHTML kennen das auch der Opera und der Safari. Aber eine totsichere Methode ist diese:

Code:

 <script type="text/javascript"> if (isIE) { alert('IE!'); } </script>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Bild auf Bild anzeigen bei x/y	Screeze	JavaScript, Ajax und mehr	2	19.01.2009 19:40
Bildupload in CMS funktioniert nicht	soffi	PHP Tipps 2009	18	10.01.2009 18:24
[Erledigt] Bild per klick ändern?	fan34	JavaScript, Ajax und mehr	2	22.11.2008 13:10
[Erledigt] Bild anzeigen über $name	t-stude	Datenbanken	8	11.11.2008 15:34
[Erledigt] bild als link mit mouseover ohne zeilenumbruch	SteiniKeule	HTML, Usability und Barrierefreiheit	12	30.10.2008 21:12
[Erledigt] Bild verändert sich auf Klick Script	errox	JavaScript, Ajax und mehr	1	21.10.2008 20:51
Transparentes Bild über Bild legen update gelöst	Broadcast	PHP-Fortgeschrittene	11	04.02.2008 15:27
[Erledigt] Bild aus Datei in Bild einfügen		PHP Tipps 2005-2	1	07.08.2005 23:36
[PHP«Image] Bild in ein anderes Bild einsetzen		PHP Tipps 2005-2	4	07.08.2005 19:39
Ausfürhen eines Scripts bei klick auf Bild		PHP Tipps 2005	10	20.05.2005 18:33
Bild aus Server anzeigen lassen	flual2000	PHP Tipps 2004	4	26.10.2004 16:33
ADCELL Vermarktung zu 75% Pay per Klick Kampagnen		Beitragsarchiv	0	18.10.2004 12:37
bei klick auf bild code ausführen		PHP Tipps 2004	10	19.07.2004 22:23
Bild größe hat prob mit umbenennung.	JEGO	PHP Tipps 2004	1	08.07.2004 16:30

28.02.2009, 14:30
Screeze Erfahrener Benutzer Registriert seit: 04.01.2009 Beiträge: 844 PHP-Kenntnisse: Fortgeschritten	[Erledigt] Koordinaten auf Bild per klick Ich hab schon unseren Lieblingsfreund google bemüht, aber da kommt ausnahmsweise nix brauchbares bei raus. Und zwar habe ich ein Bild (feste höhe+breite) und müsste per Klick auf das Bild die Koordinaten ermitteln, aber nicht von der gesamten seite, sondern die koordinaten der position auf dem Bild, mit denen ich dann weiterarbeiten kann (berechnungen + anzeige auf dem bild + ...) und zwar ohne dass die seite abgeschickt wird, (habe da ein paar lösungen mit <input type=image...> gefunden, das beim abschicken die koordinaten mitliefert. Ich finde leide keiner passende funktion dafür, kann mir da jemand einen tipp geben?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

28.02.2009, 16:58
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Hallo, du kannst die Mauskoordinaten auslesen und dann die Position des Bildes auf der Seite davon abziehen. Klingt einfach, ist aber etwas aufwendiger, da das Bild nicht unbedingt absolut im BODY positioniert ist und das Auslesen von myImage.style.left und myImage.style.top nicht reicht. Ein JavaScript-Framework deiner Wahl sollte dir aber helfen können. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

28.02.2009, 17:57
Screeze Erfahrener Benutzer Registriert seit: 04.01.2009 Beiträge: 844 PHP-Kenntnisse: Fortgeschritten	hmm ne ein framework kommt nicht in frage in dem fall. hmm das bild is relativ positioniert. Da das bild in einem eigenen div-container sitzt, wäre es auch denkbar die position davon / die position des klicks auf dem div zu ermitteln. Gäbs da ne möglichkeit?

28.02.2009, 18:03
agrajag Moderator Registriert seit: 02.10.2006 Beiträge: 3.820 PHP-Kenntnisse: Fortgeschritten	Nicht das ich wüsste. Beim onClick-Event werden nunmal nicht die Koordinaten des Klicks relativ zum Elternelement übergeben... Das musst du dir - wie Manko schon gesagt hat - dann schon selbst ausrechnen. Und ich vermute mal da wirst du dir noch die Haare raufen, da es da doch einige Unterschiede bei den Browsern gibt, wie du den Offset/die Position eines Elements ermitteln kannst... Frameworks to the rescue __________________ Today you...Tomorrow me.

28.02.2009, 18:04
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Notfalls ein Iframe als Ziel der Form-Action __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

28.02.2009, 19:33
Screeze Erfahrener Benutzer Registriert seit: 04.01.2009 Beiträge: 844 PHP-Kenntnisse: Fortgeschritten	hmm na gut wird die einzige möglichkeit sein, schau ich mir später dann mal an und geb rückmeldung

01.03.2009, 19:52
Screeze Erfahrener Benutzer Registriert seit: 04.01.2009 Beiträge: 844 PHP-Kenntnisse: Fortgeschritten	ok habs gefunden, mit Code: e.clientX e.clientY bekomm ich die richtigen werte. jetz muss ich nurnoch ne browserweiche finden, dass ich im IE 2 abziehen kann, dann passts danke edit: sowohl bei clientY, clientX, als auch bei den offsets, zählt der IE grundsätzlich 2 dazu...