Pallina che segue il mouse sui links

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript

COMPATIBILITÀ: Ms Ie, Netscape, Opera
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

Nell'esempio di questa settimana vedremo un effetto grafico di tutto rispetto. Nonostante la semplicità estetica, l'impatto è notevole e la sintassi da utilizzare è abbondante, soprattutto tenendo conto della compatibilità della demo con i due principali browser in circolazione: Ms Ie e Netscape.
A parole, il risultato finale non è facile da descrivere: una pallina di colore grigio (che può essere sostituita con qualsiasi altra immagine al posto di circle.gif) seguirà il mouse solamente quando questo si posizionerà sopra i links predisposti a tale funzione. Una volta che il cursore uscira' dalla zona di questi collegamenti, l'immagine tornerà nella posizione orginale, per poi rimuoversi nel momento in cui il puntatore dovesse tornare sui links.
Vediamo ora il codice:

// Default browsercheck, added to all scripts!
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
// Variables to set
numItems=5 // How many menuitems do you want?

circleXstart=100 // Where should the circle start and end, x position
circleYstart=-20 // Where should the circle start and end, y position
circleXoffset=5 // The offset between the buttons X position and the circles X position on mouseover
circleYoffset=-3 // The offset between the buttons Y position and the circles Y position on mouseover

circlePXspeed=5 // How many pixels the circle will move per timeout
circleTspeed=10 // Timeout speed in milliseconds

circleStay=1 // Set this to 0 if you don't want the circle to stay on the active link when a link is clicked.

Tra le variabili appena viste, la più importante è sicuramente

numItems=5

Che indica quanti menuItems presenti nell'esempio. I menuItems sono molto importanti perché avendo 5 menuItems si otterranno 6 links, con 7 menuItems si avranno 8 links e così via. Più avanti però, vedremo che per aumentare il numero dei links predisposti al movimento della pallina, sarà necessario modificare in altri due punti differenti la sintassi della demo.

Vediamo quindi di procedere con l'analisi dello script:

function slideball_init(){
oBut=new Array()
for(i=0;i<=numItems;i++){
oBut[i]=new makeObj('divButton'+i)
}
oCircle=new makeObj('divCircle')
// Set the placement of each individual button below.
// Syntax: oBut[num].moveIt(xplacement,yplacement)
oBut[0].moveIt(50,200)
oBut[1].moveIt(110,200)
oBut[2].moveIt(170,200)
oBut[3].moveIt(230,200)
oBut[4].moveIt(280,200)
oBut[5].moveIt(330,200)
oCircle.moveIt(circleXstart,circleYstart)
// Showing the buttons
for(i=0;i<=numItems;i++){
oBut[i].showIt()
}
}

Ecco che abbiamo trovato la seconda parte di codice da modificare per aggiungere un link sensibile al movimento dell'immagine. Ad esempio, la riga:

oBut[5].moveIt(330,200)

Indica la presenza del sesto bottone (non quinto perché si conta partendo da 0). Le cifre 330 e 200 presenti tra le parentesi tonde, indicano la distanza in pixel dal margine sinistro e superiore in cui il link sensibile si deve trovare.

L'altra porzione di sorgente da cambiare per aggiungere un bottone sensibile, è presente nel <body> (il corpo del documento). Vediamo dove:

<div id="divButton0" class="clButtons"><a href="#" onmouseover="sbmover(0)" onmouseout="sbmout(0)" onclick="changeListing(0); return false">Link 1</a></div>
<div id="divButton1" class="clButtons"><a href="#" onmouseover="sbmover(1)" onmouseout="sbmout(1)" onclick="changeListing(1); return false">Link 2</a></div>
<div id="divButton2" class="clButtons"><a href="#" onmouseover="sbmover(2)" onmouseout="sbmout(2)" onclick="changeListing(2); return false">Link 3</a></div>
<div id="divButton3" class="clButtons"><a href="#" onmouseover="sbmover(3)" onmouseout="sbmout(3)" onclick="changeListing(3); return false">Link 4</a></div>
<div id="divButton4" class="clButtons"><a href="#" onmouseover="sbmover(4)" onmouseout="sbmout(4)" onclick="changeListing(4); return false">Link 5</a></div>
<div id="divButton5" class="clButtons"><a href="#" onmouseover="sbmover(5)" onmouseout="sbmout(5)" onclick="changeListing(5); return false">Link 6</a></div>

Ecco i vari links con i richiami ai movimenti della pallina. Esaminati i punti cardine di questo esempio e scoperte le più probabili e semplici modifiche apportabili, vediamo come aggiungere un altro bottone e creare quindi un settimo link con pallina. La prima parte di codice da personalizzare è nello script principale e prevede la modifica della variabile numItems.

numItems=6

Ricordiamo che essendo 7 i bottoni presenti, dovremo inserire 6 in questa variabile (ciò perché, come abbiamo già detto, si conta partendo da 0).

Il secondo punto chiave da cambiare, è la lista dei movimenti.
Modifichiamola in questo modo:

oBut[0].moveIt(50,200)
oBut[1].moveIt(110,200)
oBut[2].moveIt(170,200)
oBut[3].moveIt(230,200)
oBut[4].moveIt(280,200)
oBut[5].moveIt(330,200)
oBut[6].moveIt(380,200)

Infine, inseriamo nel body la sintassi finale per richiamare i movimenti ed un semplice link. Aggiungiamo quindi:

<div id="divButton6" class="clButtons"><a href="#" onmouseover="sbmover(6)" onmouseout="sbmout(6)" onclick="changeListing(6); return false">Link 7</a></div>

Il link non porta a nessun nuovo documento (il # -cancelletto- serve proprio per non caricare nessun'altra pagina.) Se aveste la necessità di condurre i visitatori verso un nuovo file, sostituite # con il percorso del documento.

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/2000/aprile/35.asp?print=ok