Popup - finestre popup

di Maria Silvana Radice

Pop-up windows







Come creare una finestra popup


Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.

Finestra popup che si apre al click:


Esempio funzionante:

Se volete che la finestra si apra cliccando su un testo....


....il codice è questo:

<a href="#" onclick="window.open
('URL pagina da aprire',
'', 'width=800,height=600,left=0,
top=0,resizable=no,menubar=no,toolbar=no,
location=no,scrollbars=no,status=no');">
Testo</a> 

I valori da modificare sono quelli in rosso, in questo modo:
  • URL pagina da aprire: qui dovete inserire l'indirizzo di collegamento.
  • width e height: larghezza e altezza in pixel del popup.
  • left e top: distanza della finestra dal lato sinistro e dal lato superiore dello schermo.
  • resizable: mettete yes, oppure no, se volete che gli utenti possano ridimensionare o no la finestra.
  • menubar: mettete yes,oppure no, se volete che nella finestra appaia il menù del browser.
  • toolbar: mettete yes, oppure no, se volete che appaia la toolbar.
  • scrollbars: mettete yes, oppure no, se volete che la finestra abbia barre di scorrimento laterali
  • Testo: qui inserite il testo del link su cui gli utenti cliccheranno per aprire la finestra.
Nel caso di un sito creato con Google sites, il codice va inserito seguendo la guida: Come inserire codici e scripts in Google sites. Ricordando di impostare le misure del gadget.
(Se inserite l' URL di un'immagine caricata negli allegati di Google sites, dovete cancellare la parte dell'indirizzo dopo l'estensione del file.
Es:
https://sites.google.com/site/xxxxxxxxxxxxxxxxxxxxxx.jpg?attredirects=0
la parte in rosso va tolta.)

Se volete che la finestra si apra cliccando su un'immagine....

....il codice è questo:

<a href="#" onclick="window.open
('URL pagina da aprire',
'', 'width=800,height=600,left=0,
top=0,resizable=no,menubar=no,toolbar=no,
location=no,scrollbars=no,status=no');">
<img src="URL immagine da visualizzare"> </img></a>   

Differentemente da prima, dove c'è scritto: "URL immagine da visualizzare", dovete inserire l'indirizzo web dell'immagine su cui gli utenti cliccheranno.

Se volete che la finestra si apra al solo passaggio del mouse....

....il codice è questo:

 <a href="#" onMouseOver="window.open
('URLpagina da aprire',
'', 'width=800,height=600,left=0,
top=0,resizable=no,menubar=no,toolbar=no,
location=no,scrollbars=no,status=no');">
<img src="URLimmagine da visualizzare">
</img></a>  

Come vedete, è bastato sostituire il tag onclick, presente in alto nel codice, con il tag onMouseOver. La stessa cosa vale per la finestra che si apre sul testo

Finestra popup che si apre, automaticamente, al caricamento di una pagina:

Se volete ottenere questo effetto, dovete usare uno script, che è questo:
<script>
newwindow=window.open
("URLpaginaweb",
"scrollbars=no,status=no,resizable=no,
top=0,left=0,width=300,height=120")
newwindow.creator=self</script>

Potete modificare le dimensioni della finestra (width e height) e la distanza in pixel della finestra dal bordo superiore e dal bordo sinistro ( top e left). Se volete una barra di scorrimento, mettete il valore "yes" alla voce scrollbars.

Per inserire questo script in Google sites, bisogna usare il metodo descritto in  "Come inserire codici e scripts in Google sites", tenendo presente che è sufficiente impostare dimensioni piccolissime per il gadget (indipendentemente da quelle impostate, nello script, per la finestra popup), per es. 10x10 pixel (che è il minimo accettato) e non ha importanza dove viene posizionato nella pagina.

                                                                                               




Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in