Può risultare utile calcolare le coordinate del mouse rispetto allo screen video dell’utente. Le utilizzazioni di tali dati possono essere innumerevoli. Una è quella di poter simulare via JavaScript l’effetto title con elementi di stile molto più particolari, che magari segua il mouse durante il suo move sull’elemento prescelto.
Vediamo come procedere
Per prima cosa dobbiamo distinguere Internet Explorer dal resto del mondo, quindi creiamo una funzione che ci permetta di avvistare il browser di casa Redmond all’orizzonte.
function isIE(){
if(document.all){
return true;
}else{
return false;
}
}
Dopo di che scriviamo la funzione che ci permette di determinare in valore assoluto le coordinate x:y del mouse.
function getMousePosition(e){
if (isIE()) {
var e = window.event;
}
posx = e.clientX;
posy = e.clientY;
}
Notate il diverso comportamento della funzione nel caso in cui il client utilizzi Internet Explorer. Per calcolare le coordinate del mouse è necessario usare window.event.
Ma le coordinate del mouse cambiano continuamente al movimento. Quindi dobbiamo fare in modo che la funzione si attivi ogni volta che il mouse si muove. Per far questo basta usare l’evento onmousemove.
All’interno del documento scriveremo quanto segue (preferibilmente nei tag del head):
<script type="text/javascript">
document.onmousemove=getMousePosition
</script>
Con qualche piccola modifica possiamo ottenere un risultato di questo genere. Aprite il link e passate col mouse sulla pagina. Le coordinate del mouse si aggiorneranno automaticamente 🙂
Ma si può andare oltre, ed applicare la metodologia ad un elemento specifico, fissando a quello output del tutto particolareggiato. Ecco come simulare un title che segue il mouse quando passa sopra ad un elemento.