muiscordinaten

Gesponsorde koppelingen

PHP script bestanden

  1. muiscordinaten

« Lees de omschrijving en reacties

js.js

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
// 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 - emmanueldelay@hotmail.com - 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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


css.css
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.