Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
| |
Pallina che segue il mouse sui links
Arretrati lista "Una demo Dhtml a settimana"
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.
|
