Błędne współrzędne po kliknięciu na obrazku

Witajcie.
Mam bardzo dziwny problem. Zrobiłem sobie przykład: http://serwer1356363.home.pl/pub/sample1/ - punkty na obrazku są zawsze w tym samym miejscu, bez względu rozdzielczość ekranu (responsywność).

W docelowej stronie: http://serwer1356363.home.pl/pub/sample2/ - punkty już nie są responsywne (nie są w tym samym miejscu na różnych rozdzielczościach).

Po kliknięciu na tło w obu przykładach pojawia się furmularz z koordynatami kliknięcia. Dziwne jest to, że w sample 2 te koordynaty są jakimiś dziwnymi wartościami (podejrzewam że to jest problemem). Wie ktoś może jak to naprawić?

Z tego, co na szybko zaobserwowałem:
sample 1 - liczysz współrzędne od początku obrazka
sample 2 - liczysz współrzędne od początku strony

serek napisał(a):

Z tego, co na szybko zaobserwowałem:
sample 1 - liczysz współrzędne od początku obrazka
sample 2 - liczysz współrzędne od początku strony

dzięki za odpowiedź. Kod jest w obu przypadkach raczej taki sam.

Sugerujesz zmianę tego:

var posX = $(this).position().left, posY = $(this).position().top;
                $('.coorX').html((e.pageX - posX - 10));
                $('.coorY').html((e.pageY - posY - 10));

?

W ogóle po co odejmujesz 10 od wyniku?

Spróbuj offset() zamiast position()

serek napisał(a):

W ogóle po co odejmujesz 10 od wyniku?

Spróbuj offset() zamiast position()

http://serwer1356363.home.pl/pub/sample2/ - częściowo pomogło :)
Teraz zaznacza gdzie się kliknęło, jednak przy responsywności (zmniejszaniu/powiększaniu okna przeglądarki) - ten punkt nie zawsze jest w tym samym miejscu.
Oryginał pod tym względem działał poprawnie... :(

Odejmuję 10 żeby "wyrównać" punkt w stosunku do kliknięcia ;)

Udało mi się dojść do tego, że po "wyjęciu" komponentu z obrazkiem z części divów ( konkretnie tego:

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 ranking_zd  ">

) - wszystko działa poprawnie.

Problem w tym, że potrzebuję tego do układu strony....

Wie ktoś może jak to naprawić?