| ||||||||||||||||
 StaffScripts Follow Me | |||||||||||||||||||||||||
| Autore: Riccardo | Data: 17/09/2001 | Downloads: 1013 | Voto: 1/5 | Download | P r o v a | ||||||||||||||||||||
|
FollowMe
Dopo gli ultimi script, abbastanza complicati, qualcosa di semplice.
Quello che vi propongo in questa scheda è semplicemente un livello con del testo (o delle immagini se volete) che segue il mouse nei suoi spostamenti. Lo script si compone di poche righe di codice JavaScript ed un livello <DIV> che inserirete nel documento. Cominciamo con il livello. Dovete semplicemente copiare ed incollare questo tag: <DIV ID="FollowMe" STYLE="position:absolute;width:200;height:10;z-index:0; [... ...] layer-background-color:#ffff00;background:#ffff00;visibility:hidden"> [... ...] Ma che bello questo topo... :-)</DIV>Naturalmente potete personalizzarlo come qualsiasi altro livello, magari facendo uso di CSS. Io ho semplicemente settato uno sfondo giallo (il primo dei due serve per Netscape) e ci ho scritto dentro un testo. Un suggerimento: il livello non mettetelo all'inizio del documento, ma alla fine: prima del tag </BODY>, perché Explorer potrebbe lasciare una riga vuota all'inizio della pagina in corrispondenza della posizione del livello. Veniamo al codice: <SCRIPT>
<!--
var nn=document.layers?true:false;
var DOM2=document.getElementById?true:false;
var NN6=DOM2&&navigator.userAgent.toLowerCase().indexOf("netscape")!=-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 NN
nn?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>
Le prime tre righe sono le classiche variabili che servono per riconoscere il browser per usare la giusta sintassi necessaria a comandare i layers. La variabile seguente (distanza) verrà usata più giu: è un valore numerico che specifica di quanti pixel verrà spostato il livello rispetto all'hotspot del mouse. Se volete far impazzire i vostri visitatori date un valore negativo alla variabile per far si che il livello si sposti sotto alla freccia, e magari aggiungete cursor:default; nello Style. In questo modo il livello sarà sempre frapposto tra il cursore ed i links e... sarà impossibile cliccare sui links :-)) Segue la prima funzione ( Inizia() ) che come al solito sarà eseguita ad avvenuto download del documento: <BODY .... onLoad="Inizia()">. Alla variabile tiplayer viene assegnato l'oggetto nella prima riga della funzione, poi il livello viene reso visibile. La riga successiva serve per Netscape ed attiva la cattura dell'evento MOUSEMOVE così che il browser possa intercettare il movimento del mouse ed eseguire la funzione che gli viene indicata nella riga successiva. L'ultima funzione non fa altro che aggiornare le proprietà "top" e "left" del livello: la prima coppia di istruzioni serve per Netscape 4.x, la seconda per Netscape 6 e l'ultima per Explorer ed Opera. Una semplice variante dello script si ha sostituendo la funzione mostra() con questa: function mostra(mosso)
{
if (nn){
tiplayer.top=window.innerHeight-mosso.pageY;
tiplayer.left=window.innerWidth-mosso.pageX;}
else
if (DOM2&&NN6){
tiplayer.style.top=window.innerHeight-mosso.pageY;
tiplayer.style.left=window.innerWidth-mosso.pageX;}
else{
tiplayer.style.top=document.body.clientHeight-window.event.clientY;
tiplayer.style.left=document.body.clientWidth-window.event.clientX;}
}
è quasi uguale, ma il livello si posiziona nel punto diametralmente opposto alla posizione del mouse rispetto al centro della finestra. Lo potete provare cliccando sul link nella finestra di prova. Tutto qua. Prima di lasciarvi sottolineo che le due righe che ho colorato in rosso, le potete usare ogni qual volta volete eseguire una funzione al movimento del mouse. Per commenti o suggerimenti a questa scheda scrivete a Riccardo. | |||||||||||||||||||||||||
| |||||||||||||||||||||||||
| Per navigare correttamente il sito è necessario abilitare i cookies. |
| Enjoy Open Source! |
Stampa
Segnala 
Preferiti 
