AG Web Solutions
a- a+

Creare un POP-UP stile Flash

In questo tutorial vedremo come utilizzando i CSS sia possibile creare un pop-up senza bordi sile flash, che si chiuda tramite la simpatica X in alto o in basso del POP-UP.

Questo tipo di POP-UP ha il "vantaggio" di non essere bloccato dal Firewall di Windows XP, come succede con i POP-UP Flash privi di cornice.
Sicuramente si tratta di uno strumento utilie per fare pubblicità all'interno del proprio sito.

Per questo tutorial sono necessari:
- Un editor testuale o HTML
- Un programma grafico (opzionale).

Nella pagina qui sopra noi abbiamo utilizzato un'immagine come testo del pop-up, ma potremmo benissimo inserire solo testo.

Realizziamo il codice CSS da inserire tra i TAGs HEAD della nostra pagina.

<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}
#banner {
position:absolute;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
border:0px;
background-color:#FFFFFF;
width: 245px;
height: 181px;
left: 333px;
top: 151px;
}
#banner a
{
color:#FFCC00;
text-decoration:none;
background-color:#FFFFFF;
}
#banner a:hover
{
color:#FFCC00;
text-decoration:underline;
background-color:#FFFFFF;
}
#chiudi
{
position:absolute;
width:9px;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#000000;
left: 570px;
top: 137px;
text-align:right;
}
#chiudi a
{
background-color:#FFFFFF;
font-weight:bold;
color:#000000;
text-decoration:none;
text-align:right;
}
#chiudi a:hover
{
background-color:#FFFFFF;
font-weight:bold;
color:#990000;
text-decoration:none;
text-align:right;
}
</style>


Ora passiamo alla realizzazione del codice presente tra i TAGs BODY. Eccolo qui sotto abbondantemente commentato:

<body>
<!-- Inzio codice testo pagina -->
Qui il testo della pagina... (noi abbiamo messo le classiche frasi latine..)
<!-- Fine codice testo pagina -->
<!-- Inizio codice POP-UP -->
<div id="banner">
<a href="http://www.agwebsolutions.it" target="_blank"><img src="immagine.png" border="0" alt="Clicca qui" /></a>
</div>
<!-- fine codice pop-up -->
<!-- Inizio codice barra di chiusura POP-UP -->
<div id="chiudi" align="right">
<a href="#" onclick="banner.style.display='none';
chiudi.style.display='none'"><strong>X</strong></a>
</div>
<!-- Fine codice barra di chiusura POP-UP -->
</body>



Qui salviamo la pagina e proviamo a vedere il risultato.

La posizione del POP-UP possiamo settarla tra i TAGs STYLE, oppure se disponiamo di un editor HTML con visualizzazione "Design" possiamo spostarlo comodamente con il mouse...

A voi il piacere (se mai vorreste) di cambiare la posizione della X rispetto al POP-UP.



Ti potrebbe interessare anche

commenta la notizia

Ci sono 5 commenti
Anonimo
Secondo me la spiegazione è pessima:
Assolutamete incomprensibile dove vanno inseriti quei codici.

Anonimo
come inserilo su un blog realizato su blogspot.com pero voglio inserire in POP-UP video di you tube