muiscordinaten
js.js
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
// TO do: objecten aanmaken
xy_image1 = new xy('image1');
xy_image2 = new xy('image2');
//////////////////////////////////////////////
// To do: voeg hier functies toe die overeen komen met javascript events (bv. onClick)
// Dit zijn dus slechts voorbeelden.
// Hier gebruik je best de objectnaam, beter dan this. Soms geeft this. problemen, zeker bij ajax response functies
xy_image1.onMouseover = function(event)
{
xy_image1.getXY(event);
$('message1').innerHTML = 'x: '+ xy_image1.x +' y: '+ xy_image1.y +' <br/>left: '+ xy_image1.left +' top: '+ xy_image1.top ;
}
xy_image2.onClick = function(event)
{
xy_image2.getXY(event);
$('message2').innerHTML = 'x: '+ xy_image2.x +' y: '+ xy_image2.y +' <br/>left: '+ xy_image2.left +' top: '+ xy_image2.top +'<br/>Browser: '+ this.browser;
$('pointer_image').style.left = (xy_image2.x + xy_image2.left) + 'px' ;
$('pointer_image').style.top = (xy_image2.y + xy_image2.top) + 'px' ;
$('pointer_image').style.display = 'block';
}
//////////////////////////////////////////////
// Emmanuel Delay - [email protected] - 2009
//
// de class (Hoewel je dit zo niet mag noemen in javascript)
function xy(objectName)
{
this.objectName = objectName;
this.obj = null;
}
xy.prototype.init = function() // Deze functie kan aangesproken worden bij onLoad(). De functie wordt echter ook aangesproken bij eerste gebruik van het object
{
this.obj = $(this.objectName);
this.x = 0;
this.y = 0;
this.left = 0;
this.top = 0;
}
xy.prototype.getXY = function(event)
{
if (this.obj == null) this.init();
this.x = 0;
this.y = 0;
this.left = 0;
this.top = 0;
var pos_x = 0;
var pos_y = 0;
var layer = false;
if(1) // eventueel komt hier nog een echte vvoorwaarde. Voorlopig is dit blok nodig voor alle omstandigheden
{
var top = 0;
var left = 0;
var elm = this.obj ;
if (! (event.pageX == event.layerX && event.pageY == event.layerY) ) // when position: absolute && z-index > 1 => other calculation is needed
{
layer = true;
}
var i = 0;
while (elm)
{
left = elm.offsetLeft;
top = elm.offsetTop;
if (i == 0)
{
if (layer == true)
{
pos_x = event.layerX - left;
pos_y = event.layerY - top;
}
else
{
pos_x = event.pageX - left;
pos_y = event.pageY - top;
}
this.x = pos_x;
this.y = pos_y;
}
this.left += elm.offsetLeft;
this.top += elm.offsetTop;
elm = elm.offsetParent;
i++;
}
}
//for IE and opera
if (this.getBrowser() == 'IE' || this.getBrowser() == 'Opera')
{
pos_x = window.event.offsetX;
pos_y = window.event.offsetY;
this.x = pos_x;
this.y = pos_y;
}
}
xy.prototype.getBrowser = function() // voel je vrij om een andere browser detector te gebruiken. Ik wou het klein houden.
{
this.browser = 'andere browser' ;
if (navigator.userAgent.indexOf('MSIE') !=-1)
{
this.browser = 'IE';
}
if (navigator.userAgent.indexOf('Opera') !=-1)
{
this.browser = 'Opera';
}
if (navigator.userAgent.indexOf('Firefox') !=-1)
{
this.browser = 'Firefox';
}
if (navigator.userAgent.indexOf('Safari') !=-1)
{
this.browser = 'Safari';
}
if (navigator.userAgent.indexOf('Chrome') !=-1)
{
this.browser = 'Chrome';
}
return this.browser;
}
///////////// Misc. functions
$ = function(text)
{
// Zo kan je gemakkelijk html elemanten aanspreken
return document.getElementById(text);
}
xy_image1 = new xy('image1');
xy_image2 = new xy('image2');
//////////////////////////////////////////////
// To do: voeg hier functies toe die overeen komen met javascript events (bv. onClick)
// Dit zijn dus slechts voorbeelden.
// Hier gebruik je best de objectnaam, beter dan this. Soms geeft this. problemen, zeker bij ajax response functies
xy_image1.onMouseover = function(event)
{
xy_image1.getXY(event);
$('message1').innerHTML = 'x: '+ xy_image1.x +' y: '+ xy_image1.y +' <br/>left: '+ xy_image1.left +' top: '+ xy_image1.top ;
}
xy_image2.onClick = function(event)
{
xy_image2.getXY(event);
$('message2').innerHTML = 'x: '+ xy_image2.x +' y: '+ xy_image2.y +' <br/>left: '+ xy_image2.left +' top: '+ xy_image2.top +'<br/>Browser: '+ this.browser;
$('pointer_image').style.left = (xy_image2.x + xy_image2.left) + 'px' ;
$('pointer_image').style.top = (xy_image2.y + xy_image2.top) + 'px' ;
$('pointer_image').style.display = 'block';
}
//////////////////////////////////////////////
// Emmanuel Delay - [email protected] - 2009
//
// de class (Hoewel je dit zo niet mag noemen in javascript)
function xy(objectName)
{
this.objectName = objectName;
this.obj = null;
}
xy.prototype.init = function() // Deze functie kan aangesproken worden bij onLoad(). De functie wordt echter ook aangesproken bij eerste gebruik van het object
{
this.obj = $(this.objectName);
this.x = 0;
this.y = 0;
this.left = 0;
this.top = 0;
}
xy.prototype.getXY = function(event)
{
if (this.obj == null) this.init();
this.x = 0;
this.y = 0;
this.left = 0;
this.top = 0;
var pos_x = 0;
var pos_y = 0;
var layer = false;
if(1) // eventueel komt hier nog een echte vvoorwaarde. Voorlopig is dit blok nodig voor alle omstandigheden
{
var top = 0;
var left = 0;
var elm = this.obj ;
if (! (event.pageX == event.layerX && event.pageY == event.layerY) ) // when position: absolute && z-index > 1 => other calculation is needed
{
layer = true;
}
var i = 0;
while (elm)
{
left = elm.offsetLeft;
top = elm.offsetTop;
if (i == 0)
{
if (layer == true)
{
pos_x = event.layerX - left;
pos_y = event.layerY - top;
}
else
{
pos_x = event.pageX - left;
pos_y = event.pageY - top;
}
this.x = pos_x;
this.y = pos_y;
}
this.left += elm.offsetLeft;
this.top += elm.offsetTop;
elm = elm.offsetParent;
i++;
}
}
//for IE and opera
if (this.getBrowser() == 'IE' || this.getBrowser() == 'Opera')
{
pos_x = window.event.offsetX;
pos_y = window.event.offsetY;
this.x = pos_x;
this.y = pos_y;
}
}
xy.prototype.getBrowser = function() // voel je vrij om een andere browser detector te gebruiken. Ik wou het klein houden.
{
this.browser = 'andere browser' ;
if (navigator.userAgent.indexOf('MSIE') !=-1)
{
this.browser = 'IE';
}
if (navigator.userAgent.indexOf('Opera') !=-1)
{
this.browser = 'Opera';
}
if (navigator.userAgent.indexOf('Firefox') !=-1)
{
this.browser = 'Firefox';
}
if (navigator.userAgent.indexOf('Safari') !=-1)
{
this.browser = 'Safari';
}
if (navigator.userAgent.indexOf('Chrome') !=-1)
{
this.browser = 'Chrome';
}
return this.browser;
}
///////////// Misc. functions
$ = function(text)
{
// Zo kan je gemakkelijk html elemanten aanspreken
return document.getElementById(text);
}
index.php (enkel html)
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>voorbeeld muiscordinaten opvangen</title>
<script src="js.js" language="javascript" type="text/javascript"></script>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="pointer_image.gif" id="pointer_image"/>
<p>Voorbeeld van het opvangen van muiscordinaten, bij verschillende omstandigheden</p>
<p> opvulling scherm</p>
<p> Kwestie dat je kan scrollen, als je je venster klein houdt</p>
<p> opvulling scherm</p>
<div class="kader" id="gewone_div">
<div>
Gewone div.
<br/> bij onMousemove wordt xy_image1.onMouseover() aangeroepen.
</div>
<div>
<img src="050405_einstein_tongue.widec.jpg" id="image1" onmousemove="xy_image1.onMouseover(event);"/>
</div>
<div id="message1">
</div>
</div>
<div class="kader" id="popup">
<div>
div met position: absolute en hogere z-index
<br/> bij onClick wordt xy_image2.onClick() aangeroepen.
</div>
<img src="050405_einstein_tongue.widec.jpg" id="image2" onclick="xy_image2.onClick(event);"/>
<div id="message2">
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>voorbeeld muiscordinaten opvangen</title>
<script src="js.js" language="javascript" type="text/javascript"></script>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="pointer_image.gif" id="pointer_image"/>
<p>Voorbeeld van het opvangen van muiscordinaten, bij verschillende omstandigheden</p>
<p> opvulling scherm</p>
<p> Kwestie dat je kan scrollen, als je je venster klein houdt</p>
<p> opvulling scherm</p>
<div class="kader" id="gewone_div">
<div>
Gewone div.
<br/> bij onMousemove wordt xy_image1.onMouseover() aangeroepen.
</div>
<div>
<img src="050405_einstein_tongue.widec.jpg" id="image1" onmousemove="xy_image1.onMouseover(event);"/>
</div>
<div id="message1">
</div>
</div>
<div class="kader" id="popup">
<div>
div met position: absolute en hogere z-index
<br/> bij onClick wordt xy_image2.onClick() aangeroepen.
</div>
<img src="050405_einstein_tongue.widec.jpg" id="image2" onclick="xy_image2.onClick(event);"/>
<div id="message2">
</div>
</div>
</body>
</html>
css.css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.kader
{
border: 1px solid #000000;
margin: 4px;
padding: 3px;
}
#gewone_div
{
}
#popup
{
position: absolute;
z-index: 5;
top: 100px;
left: 400px;
}
#pointer_image
{
position: absolute;
z-index: 6;
display: none;
}
{
border: 1px solid #000000;
margin: 4px;
padding: 3px;
}
#gewone_div
{
}
#popup
{
position: absolute;
z-index: 5;
top: 100px;
left: 400px;
}
#pointer_image
{
position: absolute;
z-index: 6;
display: none;
}