Determinarea coordonatelor din imagine folosind javascript, 2coders - blogul dezvoltatorului web

La proiectarea unui proiect, trebuia să stabilesc coordonatele clicului utilizatorului pe imagine. Asta este, determina locul de depresie. Aceasta nu era deloc o sarcină dificilă.







Mai întâi, creați un fișier html simplu care va afișa o imagine pentru noi.

Totul este extrem de simplu, indentarea de deasupra este făcută pentru a arăta că sunt luate în considerare coordonatele imaginii și nu întregul document.

Să adăugăm un handler la evenimentele onclick.

Te-am adorat!))), Nu stii cat de mult am peredolbalsya in timp ce incerca sa-si dea seama asta!

Acest lucru funcționează numai pe pagina goală.
Imediat ce apare formatul tabelului, poziția X plutește departe.
Poziția Y este schimbată cu 40-50 de unități din rețeaua reală și în diferite browsere în diferite moduri ...
Nu o să meargă?

Totul este în mâinile tale

funcția defPosition (eveniment) var x = y = 0;






var event = eveniment || window.event;

// Obțineți coordonatele clicului pe pagină, adică coordonatele absolute ale clicului.

dacă (document.attachEvent! = null) x = window.event.clientX + (document.documentElement.scrollLeft document.documentElement.scrollLeft document.body.scrollLeft ..);
y = window.event.clientY + (document.documentElement.scrollTop document.documentElement.scrollTop document.body.scrollTop ..);
> altfel dacă (! document.attachEvent document.addEventListener) x = event.clientX + window.scrollX;
y = eveniment.clientY + window.scrollY;
>

// Definiți limitele obiectului, în acest caz imaginile.

// Recalculați coordonatele și trimiteți-le o alertă.

În ce ar trebui să luați toată această piesă pentru a lucra! în bodi, script sau în httml.

Vă mulțumesc foarte mult!
Numai din anumite motive din IE codul produce o eroare NaN.
Poate că vă puteți ajuta să înțelegeți, în ce poate fi o afacere?

Multe mulțumiri pentru soluție!
Doar din anumite motive am o alertă în IE, în loc de numere, scoate NaN. Singurul lucru care a venit în minte - în IE 10, în comparație cu versiunile anterioare, ceva sa schimbat în ceea ce privește procesarea evenimentului, iar acum totul trebuie să fie definit ca fiind ceva diferit ... Poate ai putea ajuta să înțelegem?







Trimiteți-le prietenilor: