Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
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.
 

 
 
Home > dhtml > teoria > 2000 > aprile > ...   © 1999-2017 Risorse.net, tutti i diritti riservati