🚀 go-pugleaf

Witam

Mam taki problem. Odczytuje pozycję myszki jak widać poniżej w kodzie. 
Jest sobie obrazek o stałych wymiarach (w tym przypadku 400px na 300px). 
Chcę odczytywać współrzędne tylko z obrazka od 0-400 i 0-300. Póki co 
odejmuje stałą liczbę (jak widać niżej aby uzyskać zero u góry i z 
lewej, ale to jest rozwiązanie tragiczne. Nie wiem jakiej funkcji użyć, 
aby mi liczył od zera niezależnie jak się ustawi blok DIV na stronie. 
Znalazłem różne warianty w internecie, ale żaden nie zdał egzaminu. 
Strona oparta jest na szablonie, obrazek jest w bloku DIV, który 
dodatkowo jest zagnieżdżony w innych blokach, nad nim są pola input. 
Wszystkie kody które znajdywałem miały odniesienie nie od początku 
ekranu, ale od jakiś innych elementów na stronie i powodu tego nigdy nie 
mogłem uzyskać zera na brzegach. Proszę o korekcję kodu jak to powinno 
być prawidłowo.


JS:
function position(evt)  {
var x = 0;
var y = 0;

x=evt.clientX-634;
y=evt.clientY-271;
document.getElementById('mouse').value = "x="+x+" y="+y;

<div>
<img src="obrazek.gif" style="width:400px; height:300px;" 
onMouseMove="position(event);">

</div>


Pozycja myszki:<input type="text" id="mouse"><br>