[JS] X en Y op een afbeelding
ik heb al behoorlijk wat geGoogled maar kan niks vinden
ik hoop dat jullie me kunnen helpen
alvast bedankt
Elwin
Code (php)
1
<input type="image" />
gebruikt in je formulier, en je drukt op dat plaatje, worden als het goed is de coördinaten meegestuurd.
Middels dat principe werkt de kaart rechts dit scriptje.
Gewijzigd op 01/01/1970 01:00:00 door Jelmer -
Code (php)
1
<img id="img" src="city.jpg" />
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script type="text/javascript"><!--
var img = document.getElementById('img');
img.onclick = function(e) {
var x = e ? e.pageX : window.event.x;
var y = e ? e.pageY : window.event.y;
}
//--></script>
var img = document.getElementById('img');
img.onclick = function(e) {
var x = e ? e.pageX : window.event.x;
var y = e ? e.pageY : window.event.y;
}
//--></script>
en dan hoef ik dus alleen nog maar variabele X en Y in een formuliertje te zetten
als ik het goed begrijp, ga het gelijk proberen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form name="Show">
<img id="img" src="gun_hand.jpg" /><br />
<input type="text" name="MouseX" value="0" size="4"> X<br />
<input type="text" name="MouseY" value="0" size="4">Y<br />
</form>
<script type="text/javascript"><!--
var img = document.getElementById('img');
img.onclick = function(e) {
var x = e ? e.pageX : window.event.x;
var y = e ? e.pageY : window.event.y;
document.Show.MouseX.value = x
document.Show.MouseY.value = y
}
//--></script>
<img id="img" src="gun_hand.jpg" /><br />
<input type="text" name="MouseX" value="0" size="4"> X<br />
<input type="text" name="MouseY" value="0" size="4">Y<br />
</form>
<script type="text/javascript"><!--
var img = document.getElementById('img');
img.onclick = function(e) {
var x = e ? e.pageX : window.event.x;
var y = e ? e.pageY : window.event.y;
document.Show.MouseX.value = x
document.Show.MouseY.value = y
}
//--></script>
hij weergeeft nu de X en Y coördinaten
alleen als ik het plaatje naar beneden plaats doormiddel van <br />'s en dan op hetzelfde punt klik dan word de Y-coördinaat ook anders
ik moet dus alleen de Y-coördinaat van de afbeelding hebben en dan niet ook nog die extra ruimte tussen browser en afbeelding
anybody?
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
function reken (tevent,tthis) {
links=tevent.clientX-parseInt(findPosX(tthis))
boven=tevent.clientY-parseInt(findPosY(tthis))
document.getElementById ('x').value = links;
document.getElementById ('y').value = boven;
}
</script>
<form method="post"><img border="0" src="'kutje.png" id="id" onmousedown ="reken(event,this)"><br>Click on pic where u want the text
<input type="text" id="x" name="coords1" readonly="yes" value="click pic for coors">
<input type="text" id="y" name="coords2" readonly="yes" value="click pic for coors">
in ieder geval bedankt voor de moeite :)
