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".
|
|
Finestra popup rimbalzante
Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript
COMPATIBILITÀ: Ms Ie, Netscape, Opera
FILES ESTERNI: finestra.htm
Visualizza la demo
Scarica la demo
Le finestre pop up sono un grande apporto per i Web masters che ne sanno fare
buon uso. Possono essere richiamate per spiegare termini troppo tecnici
presenti in un testo, oppure per completare un discorso che all'interno del
documento potrebbe non essere adeguatamente amalgamato.
Molte volte invece vengono utilizzate per ospitare banner delle comunità
gratuite (www.risorse.net/server-free) e così prima ancora di essere
caricate vengono adeguatamente cestinate con un click sul tasto X (per i
sistemi Windows).
Per ovviare a tale problema si potrebbe rendere tale finestra animata, in
modo da esaltare la sua visibilità agli occhi dell'utente.
Il sistema è composto da 2 files, un documento principale che carica la
finestra popup.
Vediamo il primo:
<SCRIPT LANGUAGE="JavaScript">
<!--
function openWindow(url){
aWindow = window.open(url,"thewindow",
'menubar=no,status=no,toolbar=noresizable=no,width=150,height=100, titlebar=no,alwaysRaised=yes');
}
// -->
</SCRIPT>
In questo primo ed unico script di questo file, viene inserito il normale
codice per aprire una finestra pop up. Tale pagina viene richiamata da un
link presente nel documento:
<a href="javascript:openWindow('finestra.htm')">Clicca qui</a>
Finestra.htm è proprio il file che contiene il sorgente per animare la
finestra e far sì che al contatto con i margini dello schermo rimbalzi come una pallina. Ecco il codice:
<SCRIPT LANGUAGE="Javascript">
<!---Hide
var xOff = 5;
var yOff = 5;
var xPos = 400;
var yPos = -100;
var flagRun = 1;
function newXlt(){
xOff = Math.ceil( 0 - 5 * Math.random()) * 5 ;
window.focus()}
function newXrt(){
xOff = Math.ceil(5 * Math.random()) * 5 ;
}
function newYup(){
yOff = Math.ceil( 0 - 5 * Math.random()) * 5 ;
}
function newYdn(){
yOff = Math.ceil( 5 * Math.random()) * 5 ;
}
function playBall(){
xPos += xOff;
yPos += yOff;
if (xPos > 600){
newXlt();
}
if (xPos < -240){
newXrt();
}
if (yPos > 470){
newYup();
}
if (yPos < -110){
newYdn();
}
if (flagRun == 1){
window.moveTo(xPos,yPos);
setTimeout('playBall()',200);
}
}
// Done hiding --->
</script>
La variabile
var xOff = 5;
Indica la velocità orizzontale con la quale la finestra deve muoversi. Il punto e virgola finale e la dicitura "var" sono facoltativi.
La variabile
var yOff = 5;
Indica la velocità verticale con la quale la finestra deve muoversi.
Le variabili
var xPos = 400;
var yPos = -100;
Definiscono la posizione rispetto al margine sinistro e superiore in cui la finestra deve apparire.
Passando con il mouse sopra il link www.risorse.net si indicherà alla
finestra di cambiare direzione del movimento.
<a name="lookAt" href="" target="_top"
onClick="opener.location='http://www.risorse.net'; window.close(); return false" onMouseOver="xOff=xOff* -1; yOff=yOff* -1; return true"><FONT SIZE="3" FACE="Arial" COLOR="Lime">www.risorse.net</FONT></a>
Ovviamente, i link stop e start servono a fermare ed a riniziare il
movimento della finestra.
|