Muiscoördinaten

Door Emmanuel Delay, 13 jaar geleden, 2.777x bekeken

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

  1. muiscordinaten

 

Er zijn 10 reacties op 'Muiscordinaten'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Zero XT
Zero XT
13 jaar geleden
 
0 +1 -0 -1
hmm ziet er goed uit. Ik zelf verkrijg mn muis coördinaten via dit:

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
function getMouseXY(e)
{
    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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$('message1').innerHTML


die $ ervoor is toch alleen met Jquery?
Emmanuel Delay
Emmanuel Delay
13 jaar geleden
 
0 +1 -0 -1
Wel ja, die $, dat werkt dus, deze kleine functie (onderaan js.js) is genoeg.

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.
Zero XT
Zero XT
12 jaar geleden
 
0 +1 -0 -1
Hoe heb je die $ dan zonder voor elkaar gekregen Jquery? Mij lukt het niet.
GaMer B
GaMer B
12 jaar geleden
 
0 +1 -0 -1
Quote:
HellRazer schreef op 25.07.2009 11:10
Hoe heb je die $ dan zonder voor elkaar gekregen Jquery? Mij lukt het niet.


Zo:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
/////////////  Misc. functions
$ = function(text)
{
  //  Zo kan je gemakkelijk html elemanten aanspreken
  return document.getElementById(text);
}
Roeltje M
Roeltje M
12 jaar geleden
 
0 +1 -0 -1
die moet ik onthouden!
Toby hinloopen
toby hinloopen
12 jaar geleden
 
0 +1 -0 -1
@HellRazor:
idd, precies dezelfde gebruik ik :)
werkt prima en is lekker klein.

alleen nu gebruik ik een framework dus is het niet meer nodig :P
Matthias R
Matthias R
12 jaar geleden
 
0 +1 -0 -1
Wat kan je hier bijvoorbeeld allemaal mee doen?
GaMer B
GaMer B
12 jaar geleden
 
0 +1 -0 -1
Quote:
Matthias schreef op 25.07.2009 20:26
Wat kan je hier bijvoorbeeld allemaal mee doen?


Hiermee kan je bijvoorbeeld een heatmap maken van je pagina:
http://4.bp.blogspot.com/_nXiUn_G4NDk/RYpvE36c3-I/AAAAAAAAAAM/Pj2fivHXANU/s400/heatmap.png
Lode
Lode
12 jaar geleden
 
0 +1 -0 -1
Die $ functie zit in meerdere js frameworks, ook in prototype bijvoorbeeld.
En kan je niet gewoon dit doen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?//js
$ = document.getElementById;
?>


Verder is prototyping van objecten zo wellicht wat duidelijker:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<?//js
test = function(){

}
test.prototype = {
    a: function(){

    },
    b: function(){

    }
}
?>
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Emmanuel Delay
Emmanuel Delay
12 jaar geleden
 
0 +1 -0 -1
Ah ja, dat doet wat meer denken aan de notatie van een class (in een aantal talen).

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. muiscordinaten

Labels

  • Geen tags toegevoegd.

Navigatie

 
 

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.