stipjes plaatsen..
de bedoeling:
er is een afbeelding.. als je daar op klikt, komt er op de plek van de muis een stipje te staan.. klik je nog een keer, komt er een tweede stipje te staan en klik je nog een keer.. dan wordt het eerste stipje verplaatst..
nu lukt het dus alleen niet helemaal.. in ie worden de twee functies deheletijd achter elkaar gedraaid, totdat ie een error geeft.. dan worden de twee stipjes allebij naar de plek van de cursor verplaatst.. in FF krijg ik de error: 'event is not defined'.. ik snap dus helemaal niet wat ik nu fout doe..
dit is mn javascript:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function eerstePunt()
{
var posx = 0;
var posy = 0;
if (event.pageX || event.pageY)
{
posx = event.pageX;
posy = event.pageY;
}
else
{
var de = document.documentElement;
var b = document.body;
posx = event.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
posy = event.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
}
if(document.getElementById('Xa')) document.getElementById('Xa').value = posx;
if(document.getElementById('Ya')) document.getElementById('Ya').value = posy;
if(document.getElementById('Pa')) document.getElementById('Pa').style.left = posx;
if(document.getElementById('Pa')) document.getElementById('Pa').style.top = posy;
//document.getElementById('img').addEventListener("click", tweedePunt(), false);
//document.getElementById('img').attachEvent("onClick", tweedePunt());
event.srcElement.setAttribute('onclick', tweedePunt());
event.srcElement.onclick = tweedePunt();
}
function tweedePunt()
{
var posx = 0;
var posy = 0;
if (event.pageX || event.pageY)
{
posx = event.pageX;
posy = event.pageY;
}
else
{
var de = document.documentElement;
var b = document.body;
posx = event.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
posy = event.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
}
if(document.getElementById('Xb')) document.getElementById('Xb').value = posx;
if(document.getElementById('Yb')) document.getElementById('Yb').value = posy;
if(document.getElementById('Pb')) document.getElementById('Pb').style.left = posx;
if(document.getElementById('Pb')) document.getElementById('Pb').style.top = posy;
/*document.getElementsByTagName('body')[0].addEventListener("click", tweedePunt(), false);
document.getElementsByTagName('body')[0].attachEvent("onClick", tweedePunt());*/
event.srcElement.setAttribute('onclick', eerstePunt());
event.srcElement.onclick = eerstePunt();
}
{
var posx = 0;
var posy = 0;
if (event.pageX || event.pageY)
{
posx = event.pageX;
posy = event.pageY;
}
else
{
var de = document.documentElement;
var b = document.body;
posx = event.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
posy = event.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
}
if(document.getElementById('Xa')) document.getElementById('Xa').value = posx;
if(document.getElementById('Ya')) document.getElementById('Ya').value = posy;
if(document.getElementById('Pa')) document.getElementById('Pa').style.left = posx;
if(document.getElementById('Pa')) document.getElementById('Pa').style.top = posy;
//document.getElementById('img').addEventListener("click", tweedePunt(), false);
//document.getElementById('img').attachEvent("onClick", tweedePunt());
event.srcElement.setAttribute('onclick', tweedePunt());
event.srcElement.onclick = tweedePunt();
}
function tweedePunt()
{
var posx = 0;
var posy = 0;
if (event.pageX || event.pageY)
{
posx = event.pageX;
posy = event.pageY;
}
else
{
var de = document.documentElement;
var b = document.body;
posx = event.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
posy = event.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
}
if(document.getElementById('Xb')) document.getElementById('Xb').value = posx;
if(document.getElementById('Yb')) document.getElementById('Yb').value = posy;
if(document.getElementById('Pb')) document.getElementById('Pb').style.left = posx;
if(document.getElementById('Pb')) document.getElementById('Pb').style.top = posy;
/*document.getElementsByTagName('body')[0].addEventListener("click", tweedePunt(), false);
document.getElementsByTagName('body')[0].attachEvent("onClick", tweedePunt());*/
event.srcElement.setAttribute('onclick', eerstePunt());
event.srcElement.onclick = eerstePunt();
}
en dit is de afbeelding:
Code (php)
1
<img src="/var/www/html/lengtes/afbeeldingen/logo.jpg" alt="geuploade afbeelding" id="img" onclick="eerstePunt()" />
en ik snap niet helemaal wat je nogmeer wilt weten.. volgensmij is er niets meer van belang dan alleen het plaatje waar opgeklikt wordt en het javascript-gedeelte de rest is namelijk alleen de standaard tags en een klein beetje tekst ;)
Proper event handling:
Code (php)
1
2
3
4
2
3
4
function handleSomeEvent(e) {
e = e || window.event;
alert(e.clientX);
}
e = e || window.event;
alert(e.clientX);
}