[Erledigt] Koordinaten auf Bild per klick

Forumsgast

Dabei seit: Heute

Beiträge:
#1

[Erledigt] Koordinaten auf Bild per klick

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?
Stichworte: -
Forumsgast

Dabei seit: 16.03.2008

Beiträge: 9230
#2

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.
Kommentar
Screeze
#3

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?
Kommentar
Forumsgast

Dabei seit: 02.10.2006

Beiträge: 3835
#4

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

Dabei seit: 21.05.2008

Beiträge: 46002
#5

28.02.2009, 18:04

Notfalls ein Iframe als Ziel der Form-Action
Kommentar

Forumsgast

Dabei seit: 28.02.2009
Beiträge: 58

28.02.2009, 18:54

offset kann IE auch...

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

Kommentar

Screeze
#7

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
Kommentar
Screeze
#8

01.03.2009, 19:42
Zuletzt geändert von Screeze; 01.03.2009, 19:45.

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:

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?
Kommentar
Screeze
#9

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...
Kommentar
Forumsgast

Dabei seit: 16.03.2008

Beiträge: 9230
#10

01.03.2009, 19:56
Zuletzt geändert von Manko10; 01.03.2009, 20:04.

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

Screeze

#11

01.03.2009, 20:04

ich hab jetzt die benutzt, funktioniert perfekt, falls jemand das gleiche problem hat, hier mal der vereinfachte code:

Code:

<html>
<head>
<script type="text/javascript">
function checkBrowserName(name){
    var agent = navigator.userAgent.toLowerCase();
    if (agent.indexOf(name.toLowerCase())>-1) {
      return true;
    }
    return false;
}
function getco(e)
{
    var cordx = (e.clientX - document.getElementById("bild").offsetLeft);
    var cordy = (e.clientY - document.getElementById("bild").offsetTop);

    if(checkBrowserName('MSIE')){
        cordx = cordx-2;
        cordy = cordy-2;
    }
    
    alert('x:' + cordx + '\ny:' + cordy);
}
</script>
</head>
<body margin="0" padding="0">
<img onclick="getco(event);" id="bild" name="bild" src="img/worldmap.jpg">
</body>
</html>

getestet mit FF, IE 7 und safari

Kommentar

Forumsgast

Dabei seit: 16.03.2008

Beiträge: 9230
#12

01.03.2009, 20:13

Browser anhand ihres User-Agets zu identifizieren, ist aber ganz schlechte Praxis. Bowserweichen sollten sich immer an Fähigkeiten oder Unfähigkeiten orientieren, wobei auch diese leider nicht immer sicher sind.
Kommentar
Screeze
#13

01.03.2009, 20:26

hmm
mir is grad noch n andrer fehler aufgefallen...

wenn das Bild in einem div container liegt, wird die position zu dem container bei offset ausgegeben, und nicht zur ganzen seite....
Kommentar

Screeze

#14

01.03.2009, 20:36

Auch hierfür habe ich eine Lösung gefunden:

Code:

<script type="text/javascript">
function checkBrowserName(name){
    var agent = navigator.userAgent.toLowerCase();
    if (agent.indexOf(name.toLowerCase())>-1) {
      return true;
    }
    return false;
}
function getco(e)
{
    imagepositionx = document.getElementById("bild").offsetLeft;
    imagepositiony = document.getElementById("bild").offsetTop;

    var parentelement = document.getElementById("bild").offsetParent;
        while (parentelement) {
          imagepositionx += parentelement.offsetLeft;
          imagepositiony += parentelement.offsetTop;
          
          parentelement = parentelement.offsetParent;
    }

    var cordx = (e.clientX - imagepositionx);
    var cordy = (e.clientY - imagepositiony);

    if(checkBrowserName('MSIE')){
        cordx = cordx-2;
        cordy = cordy-2;
    }
    alert(cordx + '/' + cordy);
}
</script>

Damit geht das script stück für stück die elternelemente ab, bis es keins mehr findet, und rechnet von jedem elternelement die position dazu.
Somit kommt man am Ende auf die gewünschte Zahl.

getestet im FF und safari

und jetz nochmal bitte kurz ne erklärung, warum man denn den browser nicht so identifizieren sollte? beide lösungen sind fehleranfällig, aber besser als keine sind sie allemal

edit: verdammt der IE mags wiedermal nicht, da krieg ich am linken bildrand einen wert von -10

Kommentar

Screeze
#15

01.03.2009, 20:45

Hmm das Ie problem krieg ich aus welchem grund auch immer gelöst, indem ich
eine tabelle um das elternelement vom bild packe

Code:

<table> <tr> <td> <div id="marking" style="position:relative;"> <img onclick="getco(event);" id="bild" name="bild" src="img/worldmap.jpg"> </div> </td> </tr> </table>

Hab jetzt keine zeit mehr für weitere tests, falls mir jemand erklären kann warum ich ohne tabelle -10, und mit tabelle den richtigen wert rausbekomme, wär ich dankbar, und falls jemand ne lösung ohne tabelle parat hat, her damit
Kommentar

Ankündigung

[Erledigt] Koordinaten auf Bild per klick

Neue Werbung 2019