Koordinaten innerhalb eines Elements

[Frank]

Hallo alle zusammen,

Ich habe zwei Probleme mit Javascript. Ich möchte die Koordinaten des Mauszeigers innerhalb eines <p>-Tags auslesen. Laut Selfhtml funktioniert das mit der Offset-Funktion. Allerdings funktioniert diese nicht in jedem Browser und auf Selfhtml finde ich auch keine ähnliche Funktion, welche im FF etc. funktioniert. Wie muss ich das nun machen?

Die Seite um die es sich dreht ist http://minigames.lost-galaxy.de/staedteraten/. In dem Tag

<p id="imgbar"></p>

sollen die Zeigerkoordinaten ausgelesen werden. Die Funktion dazu ist schon vorhanden und hat auch schon den event-Handler, jedoch habe ich mit dem Bestimmen der Mausposition in den verschiedenen Browsern noch wenig Erfahrung.

Das zweite Problem an dem Script ist, das der IE die Leiste nicht anzeigt, wo man sich die Stadt auswählen kann. Die relevanten Codeteile dafür sind:

 gamecontainer.innerHTML = '<p id="actionbar"></p>';  
gamecontainer.innerHTML += '<p id="gesuchtestadt"><em>Bitte w&auml;hlen Sie eine Stadt aus.</em></p>';  
gamecontainer.innerHTML += '<p id="imgbar" onclick="set_marker();"></p>';  
  
actionbar = document.getElementById('actionbar');  
gesuchtestadt = document.getElementById('gesuchtestadt');  
imgbar = document.getElementById('imgbar');  
  
var actionbar_temp = '<select name="stadt"><option style="font-style: italic;" value="-1">Stadt w&auml;hlen</option>';  
for(stadt_key in staedte){  
staedte_temp = staedte[stadt_key].split("|");  
actionbar_temp += '<option value="' + stadt_key + '">' + my_decode(staedte_temp[0]) + '</option>';  
}  
actionbar_temp += '</select> <input type="button" value="Stadt wechseln" onclick="change_city();"> - <a href="javascript:new_city();">Neue Zufallsstadt</a>';  
actionbar.innerHTML = actionbar_temp;

Der IE scheint dabei die letzte Zeile zu ignorieren wodurch das <p>-Tag mit der id "actionbar" leer bleibt.

Danke für Eure Hilfe.

LG
Frank

[Micha]

Hallo Frank,

Laut Selfhtml funktioniert das mit der Offset-Funktion. Allerdings funktioniert diese nicht in jedem Browser und auf Selfhtml finde ich auch keine ähnliche Funktion, welche im FF etc. funktioniert. Wie muss ich das nun machen?

Etwas weiter oben findest Du layerX und layerY. Das sollte für Dein Vorhaben geeignet sein.

Mit freundlichem Gruß
Micha

[Frank]

Hallo,

Etwas weiter oben findest Du layerX und layerY. Das sollte für Dein Vorhaben geeignet sein.

Danke. Das scheine ich übersehen zu haben oder nicht als Lösung erkannt zu haben.

Nun kommt allerdings ein weiteres Problem mit dem Event-Handler. Und zwar gibt Firefox hierbei einen Fehler aus:

gamecontainer.innerHTML += '<p id="imgbar" onclick="set_marker();"></p>';

Der Fehler besagt: "e has no properties". Als ich es anders versucht habe hat das der IE ignoriert. Das sah dann so aus:

imgbar = document.getElementById('imgbar');  
imgbar.onclick = set_marker;

Wenn ich beides benutze funktioniert es in beiden Browsern, aber es muss doch auch eine Möglichkeit geben, die für beide funktioniert?

Und das Problem im IE besteht auch immernoch.

LG
Frank

[Micha]

Hallo Frank,

Der IE übergibt das Event nicht, so dass Du es in der Funktion ermitteln musst. Deshalb musst Du einen kleinen Umweg einlegen:

  
imgbar.onclick = function(e) {  
  set_marker(e);  
};  
  
function set_marker(e){  
 e = e||window.event; // oder if(!e) e = window.event;  
 ...  
}  

Das dies dann funktioniert, soll Dir folgendes tmp. Beispiel verdeutlichen, an dem ich gerade arbeite. Du kannst auf die Karte klicken und  einen Pin an eine beliebige Stelle setzen. Es werden also die Koordinaten der Maus bestimmt und das Ding dort platziert - zugegegben, im Rahmen der Parameterbestimmung der Transformation, die aber recht gut kommt. Hier findest Du einmal die Funktion setNewPosition() und in der init() Funktion den Aufruf:

  
img.Instanz = this;  
img.onclick = function(e) { this.Instanz.setNewPosition(e); };

Zu Deinem anderen Probelm: Schon mal über die DOM-Methoden versucht?

Mit freundlichem Gruß
Micha