coordinaten muisklik op plaatje ?

Door - Roland - op 13-03-2009 11:11

821 views

Hoi,

ik kon op plaatje klikken en dan aan de hand van de coordinaten waar in dat plaatje geklikt was bepaalde informatie ophalen.

Ik wil mn systeem ombouwen naar ajax (geen herlading pagina)
hoe kun je met js de coordinaten dan tov dat plaatje uitlezen ? *

Ik dacht dat er (lang geleden) zelf een keer een item over was, maar die kon ik niet vinden . . .

* ik had het met herladen pagina : formulier met een input type image en dan kon je bv $_GET['form_x'] gebruiken. maar moet nu dus een js manier zien te vinden !

jo colling

13-03-2009 12:38

Ik heb zoeits snel gevonden:


<script language="JavaScript">
<!--
currentX = 0;
currentY = 0;


function markCoords(e) {
	currentX = e.pageX;
	currentY = e.pageY;
	showCoords();
}

function showCoords() {

	if (document.all)  {
		document.all.menu.style.left = event.clientX;
		document.all.menu.style.top = event.clientY;
		document.all.menu.innerHTML = "<table cellpadding=10 cellspacing=0 border=0><tr><td nowrap><B>X</B> " + event.clientX + "<BR><B>Y</B> " + event.clientY + "</td></tr></table>";

	} else if (document.layers) {
		document.layers.nsLayer.left = currentX;
		document.layers.nsLayer.top = currentY;
		with (document.layers.nsLayer.document) {
			open();
			write("<table cellpadding=10 cellspacing=0 border=0><tr><td nowrap><B>X</B> " + currentX + "<BR><B>Y</B> " + currentY + "</td></tr></table>");
			close();
		}

	}  else if (document.getElementById && !document.all) {
document.getElementById("menu").style.top = currentY;		
document.getElementById("menu").style.left = currentX;
document.getElementById("menu").innerHTML = "<table cellpadding=10 cellspacing=0 border=0><tr><td nowrap><B>X</B> " + currentX + "<BR><B>Y</B> " + currentY + "</td></tr></table>";
	}
}



if (document.layers) {
	document.captureEvents(Event.MOUSEMOVE|Event.MOUSEDOWN);
	document.onmousemove = markCoords;

} else if (document.getElementById && !document.all) {
	document.addEventListener("mousemove", markCoords, false);
} else {

	document.onmousemove = showCoords;
}

//-->
</script>


<div id="menu" style="position:absolute;"></div>
<layer id="nsLayer" width="100" height="100"></layer>

- Roland -

13-03-2009 13:10

He Jo,

mooi "gevonden" man !?

In IE beweegt de layer mooi mee.

Leuk, en daar kom ik verder mee

echter ik wil coordinaten/positie van muis op het plaatje, dat is natuurlijk uit te rekenen, alleen de site is gecentreerd! Dus ook dat plaatje .

Kun je opvragen waar dat plaatje(img) staat in de browser : top, left ?

Reageren

Inloggen om te reageren