Banner espandibili in DHTML
Vi è mai capitato di avere tante di quelle cose da scrivere in un banner da rendere assolutamente insufficienti i fatidici 468*60 pixel del classico formato "full"? oppure di voler promuovere un prodotto tale che se ne renderebbe l'idea solo grazie ad una certa dimensione grafica?
Certo, per questo sono stati introdotti banner di altri formati... ma se lo spazio a disposizione è quello dei famosi 468*60 pixel? Come possiamo fare?
No problem, basta un pizzico di DHTML!!!
Create il vostro banner di dimensioni 468X300 pixel ad esempio, e fate in modo che i primi 60 pixel (in altezza) se mostrati da soli non diano l'idea di un'immagine caricata a meta, ma fate in modo da far capire che, semplicemente passando sul banner, si avranno informazioni in più senza bisogno del click.
Non sto qui a fare strategie di marketing, ma ho inteso dare queste dritte tanto per tendere l'idea ed avere un immagine ad hoc per il funzionamento della demo che andiamo ad analizzare.
Richiamiamo il banner sulla pagina (mi astengo dall'indicare il link, ma mostro solo l'immagine) e scateniamo gli eventi onmouseover ed onmouse out, associando loro le funzioni mostrate nel seguente codice:
<img src="banner.gif" id="IMM" onmouseover="X()" onmouseout="Y()">Associamo questo CSS all'immagine ricavandone l'elemento specifico attraverso il suo ID:
#IMM
{
position: Absolute;
clip: Rect(0px 468px 60px 0px);
}
Non abbiamo fatto altro che tagliare virtualmente l'immagine, mostrandone solo i 468X60 pixel che ci interessa visualizzare per default.
La funzione Javascript, com'è intuibile, mostra tutta l'immagine al passaggio del mouse e rimostra solo le dimensioni standard del banner all'uscita del mouse dall'area interessata:
var banner;
function X()
{
banner = document.getElementById("IMM");
banner.style.clip = "Rect(0px 468px 300px 0px)";
}
function Y()
{
banner = document.getElementById("IMM");
banner.style.clip = "Rect(0px 468px 60px 0px)";
}
Faccio presente che l'immagine viene caricata tutta sulla pagina, anche se mostrata solo in parte, ragion per cui più alta sarà e più tempo di caricamento impiegherà per caricarsi, anche se il processo risulterà sfuggevole all'occhio dell'utente.
