[JS] Labirynt - wsp. kursora myszy na obrazku...

Witam.

Chciałem zrobić w JavaScript'cie cos w stylu labiryntu :) Chodzi mi o to, że sprawdzane są współrzędne kursora na obrazku (tak, że lewy górny róg to [1, 1] i gdy przesuwa się kursorem to zmieniają się współrzędne). Po wyjechaniu z odpowiedniego toru wyskakuje komunikat, itp... Coś w stylu takiej prostej gierki. Mam problem z pobranie współrzędnych. Może wie ktoś jak sprawdzić aktualną pozycję kursora. Może być wyświetlana w formularzu, jako zwykły tekst lub jako tytuł obrazka (tzn. w dymku obok kursora).

Z góry dziękuję za pomoc :D

<script>
  function engine(e) {
    e = e || event;
    document.title = e.clientX + 'x' + e.clientY;
  }
  document.onmousemove = engine;
</script>

Troszke nie o to mi chodziło :/
Szukam czeos w tym stylu ale pokazującego współżędne na obrazku a nie na całym oknie przeglądarki :/

Zaznaczam, że WCALE nie znam JavaScript...
http://regis.emid.net/~qyon/tmp/xxx/

Jakoś nie wpadłem na to by edytować tamten skrypt <mur>
Dzięki :D

P.S Fajna fotka :)

Qyon napisał(a)

Zaznaczam, że WCALE nie znam JavaScript...

uzywa sie wlasciwosci offsetLeft i offsetTop (x i y sa raczej gecko only) ale to i tak nic nie da jesli obrazek bedzie w warstwie ze stylem position absolute, w tym przypadku mozna uzyc funkcji ktora rekurencyjnie zsumuje wlasciwosci nadrzednych elementow ale jesli ktorys z nich bedzie mial obramowanie to ort! i kwiczymy, denerwuje mnie ten problem od roku :/

Qyon mógłbyś jeszcze raz przesłać ten kodzik?? Byłbym wdzęczny bo przez pomyłkę usunęłem go z dysku <mur>

Dobra już wiem jak to bylo :D Mam tylko jeden problem. Kod wygląda tak:

<img src="mapa.gif" id="obr">
<script>
 function engine(e) {
  e = e || event;
  document.title = (e.clientX - document.getElementById('obr').x) + ', ' + (e.clientY - document.getElementById('obr').y);
 }
 document.getElementById('obr').onmousemove = engine;
 document.write(Math.floor(7/2));
</script>

Działa on prawidlowo ale tylko po FireFox'em. IE i Opera podaje wartość UNDEFINDET przy - document.getElementById('obr').x :( Próbowałem też this.x ale ten sam efekt. Co mam tu wpisać aby było OK pod każdą przeglądarką??

piechnat napisał(a)

uzywa sie wlasciwosci offsetLeft i offsetTop (x i y sa raczej gecko only) ale to i tak nic nie da jesli obrazek bedzie w warstwie ze stylem position absolute:/

Sorki, że tyle piszę, ale mam jeszcze jedno pytanie... Jeśli grafika jest szersza od szerokości ekranu i przesunie się suwak w prawo to pokazywane są nieprawidłowe dane :( Piksele mierzone są od lewej krawędzi ekranu, a nie od lewej krawędzi obrazka. Czyli liczy od tego co jest widoczne na ekranie. Próbowałem czegoś w stylu "document.body.scrollWidth - document.getElementById('obr').offsetLeft" zamiast "e.clientX - document.getElementById('obr').offsetLeft" ale nic z tego nie wychodzi :/ Może wie ktoś jak to naprawić??

<script>
  var obr, dB;
  function engine(e) {
    e = e || event;
    var x = e.clientX + dB.scrollLeft - obr.offsetLeft;
    var y = e.clientY + dB.scrollTop - obr.offsetTop;
    obr.setAttribute('alt', x + ', ' + y);
  }
  onload = function() {
    dB = document.body;
    obr = document.getElementById('obrazek');
    obr.onmousemove = engine;
  }
</script>
<img id="obrazek" src="" alt="" />