Hi All,
Hopelijk kunnen jullie mij hierbij helpen.
Ik ben op zoek naar een javascript/html waarbij ik op een image kan klikken, er een klein rondje (of vierkantje) in komt te staan (op de positie waar geklikt is). Daarnaast moet het onder de image de x en y coordinaten van waar er geklikt is weergegeven worden. Nu heb ik wel het e.e.a. gevonden. Maar ik wil dat als ik de 2de keer op de image klik, moet er een 2de rondje (of vierkantje) komen en op een nieuwe regel de x en y coordinaten.
Ik heb tot nu toe de volgende code kunnen schrijven met behulp van meerder sites:
<HTML>
<HEAD>
<script type="text/javascript" src="http://www.hockeybank.nl/wp-content/mappingscript.js"></script>
<script>
$(document).ready(function() {
$('#logo').click(function(e) {
var offset = $(this).offset();
$('#x_axis').html(e.clientX - offset.left);
$('#y_axis').html(e.clientY - offset.top);
});
});
</script>
</HEAD>
<BODY>
<img id='logo' src='http://www.hockeybank.nl/wp-content/uploads/2015/11/veld500x300.jpg' />
<br><br>
X Axis: <span id="x_axis">0</span>
Y Axis: <span id="y_axis">0</span>
</BODY>
</HTML>
Thanks alvast!
Hopelijk kunnen jullie mij hierbij helpen.
Ik ben op zoek naar een javascript/html waarbij ik op een image kan klikken, er een klein rondje (of vierkantje) in komt te staan (op de positie waar geklikt is). Daarnaast moet het onder de image de x en y coordinaten van waar er geklikt is weergegeven worden. Nu heb ik wel het e.e.a. gevonden. Maar ik wil dat als ik de 2de keer op de image klik, moet er een 2de rondje (of vierkantje) komen en op een nieuwe regel de x en y coordinaten.
Ik heb tot nu toe de volgende code kunnen schrijven met behulp van meerder sites:
<HTML>
<HEAD>
<script type="text/javascript" src="http://www.hockeybank.nl/wp-content/mappingscript.js"></script>
<script>
$(document).ready(function() {
$('#logo').click(function(e) {
var offset = $(this).offset();
$('#x_axis').html(e.clientX - offset.left);
$('#y_axis').html(e.clientY - offset.top);
});
});
</script>
</HEAD>
<BODY>
<img id='logo' src='http://www.hockeybank.nl/wp-content/uploads/2015/11/veld500x300.jpg' />
<br><br>
X Axis: <span id="x_axis">0</span>
Y Axis: <span id="y_axis">0</span>
</BODY>
</HTML>
Thanks alvast!
