Principale

Webmaster

Realizzare un POP-UP stile Flash con i CSS

Scritto da Alberto Giuliani (http://www.agwebsolutions.it/) il 22 luglio 2005

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


Per capire quello che vogliamo realizzare, ecco un'anteprima.
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.

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;
}

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

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



Pagine totali: 1 [ 1 ]

Online:

Ci sono 11 utenti online, 0 della community e 11 ospiti.

Partners:

Savings • Loans • Savings Accounts • Guitar Books • DevSpy.com • Giornale Webmaster • MrWebmaster.it • Serverplan