Pełna wersja: [JS] Współrzędne myszki względem obrazka
Męczę się już od chyba 3 godzin szperając po internecie i samemu próbując ale efektu brak. Chodzi mi dokładnie o to w jaki sposób zrobić tak, że jak kliknę na obrazek (ma wielkość 100x100 ale to raczej mało istotne) to żeby w dwóch input-ach (typu tekst) wyświetliły się współrzędne myszki względem tego kliknietego obrazka.
Kiedyś pisałem coś podobnego:
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Pozycja myszki</title>
<style type="text/css">
#div
{
position: absolute;
top: 100px;
left: 200px;
width: 300px;
height: 300px;
border: 1px solid black;
background-color: green;
}
</style>
<script type="text/javascript">
function position(evt)
{
var x = 0;
var y = 0;
if (document.all)
{
x = evt.offsetX;
y = evt.offsetY;
} else
{
x = evt.clientX;
y = evt.clientY;
for(var offMark = evt.target; offMark; offMark = offMark.offsetParent)
{ x -= offMark.offsetLeft; }
for(var offMark = evt.target; offMark; offMark = offMark.offsetParent)
{ y -= offMark.offsetTop; }
}
x = ((x < 0) ? 0 : x);
y = ((y < 0) ? 0 : y);
document.getElementById('mouse').value = "x="+x+" y="+y;
}
</script>
</head>
<body>
<span>Pozycja myszki:<input type="text" id="mouse"><br></span>
<div id="div" onMouseMove="position(event);" onMouseOut="document.getElementById('mouse').value = '';"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Pozycja myszki</title>
<style type="text/css">
#div
{
position: absolute;
top: 100px;
left: 200px;
width: 300px;
height: 300px;
border: 1px solid black;
background-color: green;
}
</style>
<script type="text/javascript">
function position(evt)
{
var x = 0;
var y = 0;
if (document.all)
{
x = evt.offsetX;
y = evt.offsetY;
} else
{
x = evt.clientX;
y = evt.clientY;
for(var offMark = evt.target; offMark; offMark = offMark.offsetParent)
{ x -= offMark.offsetLeft; }
for(var offMark = evt.target; offMark; offMark = offMark.offsetParent)
{ y -= offMark.offsetTop; }
}
x = ((x < 0) ? 0 : x);
y = ((y < 0) ? 0 : y);
document.getElementById('mouse').value = "x="+x+" y="+y;
}
</script>
</head>
<body>
<span>Pozycja myszki:<input type="text" id="mouse"><br></span>
<div id="div" onMouseMove="position(event);" onMouseOut="document.getElementById('mouse').value = '';"></div>
</body>
</html>
Dzięki. Wprawdzie mówiąc jeszcze muszę ten kod przeglądnąć i przeanalizować ale wszystko jest w porządku. no może z małym wyjątkiem, ale to tylko rzecz w tym, że muszę sobie zamienić że ma działać na kliknięcie a to bardzo proste 
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.