Spot pubblicitario Flash in Dhtml

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

In molti siti si vedono ormai dei detestabili messaggi pubblicitari che compaiono come delle popup, ma malauguratamente non sono reali popup, bensì veri e propri oggetti della pagina corrente, in genere realizzati in Flash, che ci fanno andare su tutte le furie... per non essere volgari! ma comunque si tratta di una buona trovata per chi sul proprio sito deve in qualche modo gestire della pubblicità.

In questo Articolo vedremo come realizzare un meccanismo pubblicitario del genere in Dhtml, ovvero con l'utilizzo di un layer dinamico, di qualche classe Css ed una singola riga di codice Javascript.

Iniziamo ad analizzare il codice Html:

<div id="sponsor">
    <div class="chiudi">
        <a class="sponsor" href="javascript:void(0)" onclick="sponsor.style.visibility='Hidden'">CHIUDI</a>
    </div>
    <div>
        Qui il testo o l'immagine della pubblicità con relativo link...
        ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
        ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
    </div>
</div>
Creo un layer (div) a cui associo un identificativo id a cui do il nome sponsor, all'interno del quale inserisco tutto quello che fa parte di questa sottospecie di popup pubblicitario, ovvero un link di chiusura ed il testo o l'immagine con relativo link, vero e proprio della pubblicità.

La chiusura in effetti è fittizia, non trattandosi di un elemento esterno alla pagina, mi limito a nascondere il layer:
onclick="sponsor.style.visibility='Hidden'"
A questo punto devo soltanto stilizzare il box (finalmente mi è venuto fuori un termine adatto...) pubblicitario, utilizzando il seguente codice, le cui parti evidenziate in grassetto sono quelle salienti ed indispensabili:
#sponsor
{
    position: Absolute;
    background-color: #EEEEEE;
    font-size: 10px;
    font-family: Verdana;
    top: 100px;
    left: 100px;
    width: 150px;
    height: 150px;
    border: Solid 1px #000000;
}
div.chiudi
{
    text-align: Right;
    border-bottom: Solid 1px #000000;
}
a.sponsor
{
    color: #000000;
    text-decoration: None;
}
a.sponsor:hover
{
    color: #000000;
    text-decoration: None;
}

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.912)

:: Breve guida a jQuery (98.602)

:: Le espressioni regolari in Javascript (84.989)

:: Gestione delle stringhe in Javascript (74.986)

:: Stampare una pagina col Dhtml (42.850)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.642)

:: Menu orizzontale dinamico in Dhtml (37.187)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.623)

:: Istruzion condizionali in Javascript: if e switch (28.943)

IN EVIDENZA
DOWNLOAD