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

[JS] Labirynt - wsp. kursora myszy na obrazku...
.oO NoRiN Oo.
  • Rejestracja:około 20 lat
  • Ostatnio:około 14 lat
  • Postów:32
0

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


piechnat
  • Rejestracja:prawie 23 lata
  • Ostatnio:ponad 3 lata
0
Kopiuj
<script>
  function engine(e) {
    e = e || event;
    document.title = e.clientX + 'x' + e.clientY;
  }
  document.onmousemove = engine;
</script>

.oO NoRiN Oo.
  • Rejestracja:około 20 lat
  • Ostatnio:około 14 lat
  • Postów:32
0

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

Qyon
  • Rejestracja:około 21 lat
  • Ostatnio:około 14 lat
0

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


JKM czy HGW?
.oO NoRiN Oo.
  • Rejestracja:około 20 lat
  • Ostatnio:około 14 lat
  • Postów:32
0

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

P.S Fajna fotka :)

piechnat
  • Rejestracja:prawie 23 lata
  • Ostatnio:ponad 3 lata
0
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>lerzymy</ort> i kwiczymy, denerwuje mnie ten problem od roku :/


.oO NoRiN Oo.
  • Rejestracja:około 20 lat
  • Ostatnio:około 14 lat
  • Postów:32
0

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

.oO NoRiN Oo.
  • Rejestracja:około 20 lat
  • Ostatnio:około 14 lat
  • Postów:32
0

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

Kopiuj
<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ą??

Qyon
  • Rejestracja:około 21 lat
  • Ostatnio:około 14 lat
0
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:/


JKM czy HGW?
.oO NoRiN Oo.
  • Rejestracja:około 20 lat
  • Ostatnio:około 14 lat
  • Postów:32
0

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

piechnat
  • Rejestracja:prawie 23 lata
  • Ostatnio:ponad 3 lata
0
Kopiuj
<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="" />

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.