Get x y spot coord

Saluare dragilor , nu am gasit nimic de javascript aici si am postat aici considerand ca ar fi cea mai ok zona , astfel se da situatia urmatoare.
Avem o imagine pe care vom pune un marker (spot) a carui coordonate dorim sa le obtinem.
Cum putem obtine acele coordonate de tip float de genul 45.005 65.921 nu doar 45 si 65?
Si 2 cum pot face daca atemps attemps ==2 sa fie sters primul spot si pus altul nou?
Si toate astea urmeaza ulterior sa fie salvate intr.o baza de date , cele 2 coordonate
Mai jos aveti codul.

function SpotTheBall($post_name, $image_path, $attempts)
{
this.$attempts	 = 0;
this.$total_attempts = $attempts || 3;
this.$name		 = 'spottheball_' + parseInt(Math.random() * 100000, 10);
this.$post_name	 = $post_name || "SpotTheBall";
this.$image_path	 = $image_path || "/";
document.write(
	 '<div>' +
	 '<div style="background: url(' + this.$image_path + 'background.jpg) left top no-repeat; margin-right: 10px;" class="SpotTheBall" id="' + this.$name + '"></div>' +
	 '<div class="results" id="' + this.$name + '_result"><b>Results:</b><br /><br /></div>' +
	 '<div style="clear: both;"></div>' +
	 '</div>'
);
this.$element = document.getElementById(this.$name);
this.$results = document.getElementById(this.$name + "_result");
this.$element.$super = this;
this.$element.onclick = function($event)
{
	 if (this.$super.$attempts < this.$super.$total_attempts) {
	 $event = $event || window.event;
	 var $x = $event.pageX || ($event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - document.documentElement.clientLeft);
	 var $y = $event.pageY || ($event.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - document.documentElement.clientTop);
	 var $element = this;
	 $x -= $element.offsetLeft;
	 $y -= $element.offsetTop;
	 while ($element = $element.offsetParent) {
	 $x -= $element.offsetLeft;
	 $y -= $element.offsetTop;
	 }
	 var $ball = document.createElement("img");
	 $ball.src = this.$super.$image_path + "ball.gif";
	 $ball.className = "ball";
	 $ball.style.left = ($x - 6) + "px";
	 $ball.style.top = ($y - 6) + "px";
	 this.appendChild($ball);
	 this.$super.$attempts++;
	 this.$super.$results.innerHTML +=
	 '<input name="' + this.$super.$post_name + '[' + this.$super.$attempts + '][x]" type="hidden" value="' + $x + '" />' +
	 '<input name="' + this.$super.$post_name + '[' + this.$super.$attempts + '][y]" type="hidden" value="' + $y + '" />' +
	 'Ball ' + this.$super.$attempts + '. <b>' + $x + '</b>x<b>' + $y + '</b><br />';
	 }
};
}

Edited by BIT2GB, 14 June 2017 - 20:26.

Te referi la coordonate float pe ecran? Ecranul e format dintr-un numar finit de pixeli.

De ce folosesti $ peste tot?
De ce modifici innterHTML cand mai sus se vede ca stii de createElement()?

Quote

Ai o imagine peste care pui un layer transparent,  iar pe layer pui ce vrei.

Cosiderand fiecare click o incercare nu ai decat sa sa construisti o alta functie care sa gestioneze numarul de incarcari si accuratetea utilizatorului.

https://www.w3school...coordinates.asp

cnvs_getCoordinates(event)

function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}

Edited by MarianG, 14 June 2017 - 22:15.

BIT2GB, on 14 iunie 2017 - 20:24, said:

Consideri ca fiecare pixel e echivalentul a 0.001, si atunci trebuie sa misto mouseul cu 1000 de pixeli ca sa acoperi o unitate.

dani.user -> Pentru ca nu is cel mai mare cunoscator si am facut aia in 15 20 min
MarianG -> daca te uitai peste cod se vede ca eu imi generez coordonatele

OriginalCopy-> Raspuns util, ai un exemplu cum fac asta?

Edit: Am rezolvat cu coordonatele, acum o alta intrebare cum as putea desena linii doar cu click dreapta si cu click stanga sa pun spotul?

Si daca ai citi din link-ul postat de mine ai fi vazut solutia.
Dar in fine, tu te-ai ostenit sa inghesui toata logica intr-o singura subrutina.