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
Magazine di tecnologie
Magazine di viaggio e turismo
Magazine di musica e spettacoli
Negozio di Informatica
Basilicata turismo
Food e territori
Agenzia di comunicazione turistica e Digital PR

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".
 

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.
 

 
 
Home > dhtml > teoria > 1999 > dicembre > ...   © 1999-2024 Risorse.net, tutti i diritti riservati