Muiscoördinaten
Ik heb lang zitten zoeken naar een script om muiscoördinaten op te vangen. Vaak werken scripts slechts voor enkele browsers en vaak dan ng enkel voor een aantal gevallen. Wanneer je een element bekijkt met z-index en position: absolute, krijg je vaak foute resultaten. Het kan ook fout lopen wanneer je gescrolld hebt in je pagina Voor zover ik heb mogen merken werkt dit script voor elke browser. Dit script geeft 4 dingen: * x en y : muiscoördinaten tot de linkerbovenhoek van een element * left en top: coördinaten van dat element tov. de html pagina. Het is in object-geörienteerde javascript. Wat moet je zelf doen: javascript fie - je maakt een xy object aan (bv. var mijn_afbeelding_coord = new xy('mijn_afbeelding') ) - je voegt een event handler functie toe (bv. mijn_afbeelding_coord.onClick(event) { ... } ) . Deze functie begin je met getXY(event) aan te roepen. Meerdere van deze functies mogen ook. Je mag ook meerdere objecten aanmaken. html - Uiteraard laad je de javascript file in je html broncode - voeg een javascript event toe tot een element. Iets waar coördinatendetectie voor nodig is. bv. De id heb je nodig om het javascript object aan te maken. Liever dan snippets mee te geven, verkies ik om een voorbeeld te geven, met alles er op en er aan. In dit voorbeeld komen twee afbeeldingen voor; indien je dit script copy paste, zal je die twee afbeeldingen nodig hebben. In het online voorbeeld zie je precies de zelfde code, met ook de afbeeldingen. Ik hoop dat het gebruik daarmee duidelijk genoeg is. Voel je vrij om dit aan te passen, aan te vullen, verspreiden, ... Waarschijnlijk kon hier en daar nog iets geoptimaliseerd worden. Misschien pas ik nog een aantal dingen aan.
js.js
[code]
// 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);
}[/code]
index.php (enkel html)
[code]
<!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 muiscoördinaten 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 muiscoördinaten, 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>
[/code]
css.css
[code]
.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;
}
[/code]
Reacties
0