Plaats van de muis bepalen in het document
Soms is het handig om te weten waar de muis-aanwijzer zich bevindt in het window waar je document in zit. Hieronder zie je de X- en Y-coördinaten waar het puntje van de muis-pijl zich bevindt.
Op deze pagina wordt uitgelegd hoe je dat doet. De code van de voorbeelden kun je downloaden om zelf te gebruiken.
- Hier wordt gesproken over de coördinaten X en Y. Er is dus sprake van een assenstelsel. De oorsprong (x,y) = (0,0)
is in de linker bovenhoek van het document, frame of I-frame. De positieve X-as is naar rechts, de positieve Y-as is naar beneden.
- De X- en Y-coördinaten worden opgehaald uit de event mousemove. De event-handler is een anonieme function die reageert op de beweging van de muis; deze wordt gestart zodra het document geladen is.
- Elke muisbeweging heeft andere waarden van e.clientX en e.clientY tot gevolg. De verandering van de X- en
Y-coördinaten wordt in de rechthoek (id="muis_coordinaten") op het scherm getoond.
N.B.: Gewoonlijk zie je dit verhaal in een frame. Zodra je buiten dit frame komt, verandert de melding van de coördinaten niet meer, totdat je terug komt in het document.
Dit is een typisch voorbeeld van JavaScript dat pas actief mag worden als het hele document geladen is. Het tonen van de muis-coördinaten kan namelijk pas beginnen als de grootte van het document bekend is.
- In het voorbeeld hierboven wordt de positie van de muis in het hele document getoond. Voor bepaalde toepassingen moet je echter de positie van de muis binnen een element weten. Een voorbeeld daarvan is een color-picker, een applicatie waarmee je de rgb-code van een kleur kunt bepalen.
- Om daarmee te kunnen werken moet je behalve de positie van de muis, ook weten waar het element zich bevindt in het document. Verder moet je weten of, en zo ja: hoeveel, er is gescrolled, zowel horizontaal als verticaal.
In het onderstaande voorbeeld wordt dat uitgewerkt.
Hieronder zie je een rechthoek. Als je daar met de muis in komt, verandert de achtergrondkleur en verschijnen de X- en Y-coöordinaten in box er onder. Als je de muis weer buiten de rechthoek beweegt, verdwijnt de achtergrond en worden de coördinaten niet meer weergegeven.
- Om de coördinaten binnen de rechthoek (id="box" te kunnen laten zien, moet er eerst wat worden gerekend. Daarvoor is er een (anonieme) function gemaakt die wordt gestart zodra het document is geladen.
- De anonieme function haalt de X- en Y- coördinaten op van de muis in het document (e.clientX en e.clientY). Daarnaast wordt de plaats van de rechthoek in het document bepaald ()debox.offsetLeft en debox.offsetTop en wordt gekeken of het document in het window is gescrolled (window.pageXOffset en window.pageXOffset).
- Met deze gegevens worden de X- en Y-coördinaten van de muis in de box bepaald en in het vak er onder (id="box_coordinaten) getoond.
- Doordat de plaats van de rechthoeken de scroll-afstand bij elke muisbeweging wordt bepaald, blijft het script correcte resultaten geven als er ondertussen wordt gescrolled of het window wordt geresized.
- De veranderende achtergrondkleur wordt geregeld met onmouseover en onmouseout, die worden ingesteld met anonieme functions, die worden gestart als de pagina is geladen.
- De melding 'De muis heeft de Box verlaten!' wordt ook geregeld met onmouseout, op dezelfde manier als bij de achtergrondkleur van de rechthoek.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het eerste voorbeeld ziet er als volgt uit:
Om praktische redenen zijn sommige tags over meerdere regels verdeeld. In je eigen pagina moet dat
op één regel staan!
(Zet dit in de <HEAD>).
<style>
#muis_coordinaten {
width: 50%; height:auto; margin:2px auto; padding:4px;
border:2px solid navy; text-align:center
}
</style>
<script>
window.onload = function() {
document.onmousemove = function(e) {
muis_coordinaten.innerHTML = 'Coördinaten:
X: ' + e.clientX + 'px, Y: ' + e.clientY + 'px.';
}
</script>
(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).
<div id="muis_coordinaten">Coördinaten: (Nog) niet gedefinieerd.</div>
De code van het tweede voorbeeld ziet er als volgt uit:
Om praktische redenen zijn sommige tags over meerdere regels verdeeld. In je eigen pagina moet dat
op één regel staan!
(Zet dit in de <HEAD>).
<style>
#box_coordinaten {
width: 60%; height:auto; margin:2px auto; padding:4px;
border:2px solid navy; text-align:center
}
#box {
width: 60%; height:200px; margin:2px auto; padding:4px;
border:2px solid navy; text-align:center; background-color:transparent
}
</style>
<script>
window.onload = function() {
var deBox = document.getElementById('box');
deBox.onmousemove = function(e) {
box_coordinaten.innerHTML = 'Coördinaten in de box: X: ' +
(e.clientX - deBox.offsetLeft + window.pageXOffset) + 'px, Y: ' +
(e.clientY - deBox.offsetTop + window.pageYOffset) + 'px.';
}
deBox.onmouseover = function () {
deBox.style.backgroundColor = '#ffd'
}
deBox.onmouseout = function () {
box_coordinaten.innerHTML = 'De muis heeft de Box verlaten!';
deBox.style.backgroundColor = 'transparent'
}
};
</script>
Downloaden:
Druk op de knop:
File: voorb380.zip, 721 bytes.
Opmerking:
Het JavaScript op deze pagina mag pas actief worden als het hele document geladen is. Voor het werken met mouse-events is
dat een must. Er is een trend gaande om dat voor elk JavaScript te doen, zeker als je met een JavaScript-bibliotheek werkt
zoals jQuery. Dit kan echter problemen geven als de HTML in het document door JavaScript wordt gegenereerd. Wees daar op bedacht!
