Spot pubblicitario flash

In molti siti si vedono ormai dei detestabili messaggipubblicitari che compaiono come delle popup, mamalauguratamente non sono reali popup, bensì veri epropri oggetti della pagina corrente, in genere realizzati inFlash, che ci fanno andare su tutte le furie... per nonessere volgari! ma comunque si tratta di una buona trovataper chi sul proprio sito deve in qualche modo gestire dellapubblicità.

In questo Articolo vedremo come realizzare un meccanismopubblicitario del genere in Dhtml, ovvero con l'utilizzodi un layer dinamico, di qualche classe Css ed una singolariga 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 identificativoid a cui do il nome sponsor, all'internodel quale inserisco tutto quello che fa parte di questasottospecie di popup pubblicitario, ovvero un link dichiusura ed il testo o l'immagine con relativo link, veroe proprio della pubblicità.

La chiusura in effetti è fittizia, non trattandosi diun elemento esterno alla pagina, mi limito a nascondere illayer:

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

 

Vi prego... usatelo con parsimonia... questepubblicità sono odiose :-(



Ti potrebbe interessare anche

commenta la notizia