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. <img src="afbeelding.jpg" id="image1" onmousemove="xy_image1.onMouseover(event);"/>
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.
Voorbeeld: http://www.manutechnica.com/tutorials/phphulp/getxy/
Gesponsorde koppelingen
PHP script bestanden
Er zijn 10 reacties op 'Muiscordinaten'
-0 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
if(document.all)
{
tempX = event.clientX + document.documentElement.scrollLeft;
tempY = event.clientY + document.documentElement.scrollTop;
}
else
{
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
}
werkt in IE6, 7, 8, FF1, 2, 3, Opera, Safari, Chrome en Iron en misschien nog meer maar dit zijn de browsers die ik heb getest.
Ik zag btw een stukje code:
die $ ervoor is toch alleen met Jquery?
-0
Het gaat trouwens ook over de coördinaten van het element tov. links boven van je pagina. Wanneer je met layers werkt (z-index en zo), moet je wat oppassen.
-0
-0
Hoe heb je die $ dan zonder voor elkaar gekregen Jquery? Mij lukt het niet.
Zo:
2
3
4
5
6
$ = function(text)
{
// Zo kan je gemakkelijk html elemanten aanspreken
return document.getElementById(text);
}
-0
idd, precies dezelfde gebruik ik :)
werkt prima en is lekker klein.
alleen nu gebruik ik een framework dus is het niet meer nodig :P
-0
Wat kan je hier bijvoorbeeld allemaal mee doen?
Hiermee kan je bijvoorbeeld een heatmap maken van je pagina:
-0
En kan je niet gewoon dit doen:
2
3
$ = document.getElementById;
?>
Verder is prototyping van objecten zo wellicht wat duidelijker:
2
3
4
5
6
7
8
9
10
11
12
13
test = function(){
}
test.prototype = {
a: function(){
},
b: function(){
}
}
?>
-0
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu