Newsgroup: it.comp.lang.javascript
Titolo: Immagine che segue il mouse

Ciao a tutti, non conosco il javascript e sto cercando uno script che 
realizzi l'effetto dell'immagine che segue il puntatore del mouse. Ho 
trovato diversi esempi ma solo uno compatibile siao con firefox che con IE 
ma ha il difetto che con IE quando ci sono le barre di scorrimento la 
posizione dell'immagine si discosta dal puntatore. Probabilmente è calcolata 
sulla finestra totale e non su quella visibile, ho provato a modificarlo ma 
senza nessun risultato.
Si dovrebbe sostituire nel calcolo delle coordinate il valore di base con 
quello ottenuto con la funazione chiamata pageYOffset per Netscape e 
document.body.scrollTop.
Chi mi può aiutare?
Lo script è questo
<script language="JavaScript">
var nn=document.layers?true:false;
var DOM2=document.getElementById?true:false;
var NN6=DOM2&&navigator.userAgent.toLowerCase().indexOf("gecko")!=-1;
var distanza=10;
function Inizia()
 {
 tiplayer=nn?document.layers.FollowMe:DOM2?document.getElementById("FollowMe"):document.all.FollowMe; nn?tiplayer.visibility='visible':tiplayer.style.visibility='visible'; }nn?window.captureEvents(Event.MOUSEMOVE):null; // Solo per NNnn?window.onmousemove=mostra:document.onmousemove=mostra;function mostra(mosso) { if (nn){  tiplayer.top=mosso.pageY+distanza;  tiplayer.left=mosso.pageX+distanza;}  else  if (DOM2&&NN6){   tiplayer.style.top=mosso.pageY+distanza;   tiplayer.style.left=mosso.pageX+distanza;}   else{   tiplayer.style.top=window.event.clientY+distanza;   tiplayer.style.left=window.event.clientX+distanza;} }//--></script><body onLoad="Inizia()"><DIV ID="FollowMe" STYLE="position:absolute; width:38; height:36; z-index:0;background-image: url('immagini/logo.jpg'); visibility: visible;"></DIV>

 posizione dell'immagine si discosta dal puntatore.
Il codice che hai trovato è abbastanza vecchio; al giorno d'oggi Netscape 4
è difficile che venga considerato per questo genere di effetti.
Scritto più o meno al volo:
function moveIt(evt){
	evt=evt||window.event;
 
	var 	x 	= evt.clientX+20+document.documentElement.scrollLeft,
		y 	= evt.clientY+20+document.documentElement.scrollTop,
		el	= document.getElementById("follow-me");
 
	el.style.top = y+"px";
	el.style.left = x+"px";
}
window.onload = function(){
	document.onmousemove = moveIt;
}
Nel codice di markup dovresti avere quindi un elemento con id "follow-me":
	<div id="follow-me">...</div>
Ricordandoti di impostare il CSS in modo da averlo in posizione assoluta:
#follow-me{
	position:absolute;
	width:100px;
	height:100px;
	left:0;
	top:0;
	background:silver;
}
Ovviamente la posizione iniziare (top/left) e dimensioni li decidi tu a
priori.
Nel codice JS ci sarebbero da fare eventualmente dei controlli per
verificare se il browser ha il corretto supporto dei metodi e proprietà
usati; ma questa è giusto una traccia funzionante su cui lavorare, a
migliorarla fai sempre in tempo.
Nota:
Questo codice funziona correttamente in una pagina in standard mode; ovvero
con il doctype corretto. Se sei in quirks mode, devi sostituire i due:
	document.documentElement
con
	document.body
Nel qual caso, comunque, ti consiglio vivamente di iniziare a scrivere
codice (X)HTML standard, vista la direzione che stanno prendendo i browser.
-- 
~ "When you have eliminated the impossible, whatever remains,
however improbable, must be the truth." (S.H.)

 posizione dell'immagine si discosta dal puntatore.
Il codice che hai trovato è abbastanza vecchio; al giorno d'oggi Netscape 4
è difficile che venga considerato per questo genere di effetti.
Scritto più o meno al volo:
function moveIt(evt){
	evt=evt||window.event;
 
	var 	x 	= evt.clientX+20+document.documentElement.scrollLeft,
		y 	= evt.clientY+20+document.documentElement.scrollTop,
		el	= document.getElementById("follow-me");
 
	el.style.top = y+"px";
	el.style.left = x+"px";
	el = null;
}
window.onload = function(){
	document.onmousemove = moveIt;
}
L'event handler viene impostato qui per essere sicuro che l'elemento da
spostare sia stato letto dal parser.


Ho provato ma non funziona,con IE il div rimane fisso nella posizione del 
mouse quando aggiorno la pagina mentre con Firefox non va proprio. In teoria 
dovrei riuscire a far funzionare quest script per domani.
Grazie
Ho usato:
<script language="JavaScript">
function moveIt(evt){
 evt=evt||window.event;
 var x=evt.clientX+20+document.body.scrollLeft,
 y=evt.clientY+20+document.body.scrollTop,
 el=document.getElementById("follow-me");
 el.style.top=y+"px";
 el.style.left=x+"px";
 el=null;
 }
window.onload=function(){
 window.onmousemove=moveIt();
 }
</script>
Poi ho inserito nel body:
<body>
<div id="follow-me">
CIAO
</div> 

Per ora ho risolto utilizzando questo script che sembra andar bene per tutti 
i browser più diffusi. Pian piano imparerò non solo a copiare ma scrivere 
qualcosa di mio ;-)
<script language="JavaScript">
// Script per l'immagine che segue il mouse
var divName = 'follow-me'; // div che si sposta (la posizione deve essere 
definita assoluta)
var offX = 15;          // X offset dal puntatore del mouse
var offY = 15;          // Y offset dal puntatore del mouse
function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return 
evt.pageX; else if (evt.clientX)return evt.clientX + 
(document.documentElement.scrollLeft ?  document.documentElement.scrollLeft 
: document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return 
evt.pageY; else if (evt.clientY)return evt.clientY + 
(document.documentElement.scrollTop ? document.documentElement.scrollTop : 
document.body.scrollTop); else return 0;}
function follow(evt) {if (document.getElementById) {var obj = 
document.getElementById(divName).style; obj.visibility = 'visible';
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
document.onmousemove = follow;
</script>

  }
Hai presente il gioco sulla settimana enigmistica "Trova le differenze"? :)
Prima differenza: io ho scritto "document.onmousemove" e non
"window.onmousemove".
Seconda, ho assegnato il riferimento alla funzione:
	document.onmousemove=moveIt;
Mentre tu hai assegnato il valore di ritorno alla funzione:
	window.onmousemove=moveIt();
Ed essendo undefined, in sostanza non hai assegnato una beneamata :)
Ricordati inoltre di inserire il CSS nella pagina, altrimenti non ti si
muoverà comunque.
