Come inserire una serie di banner con link in un rettangolo scorrevole.

Mettiamo il caso che volessimo inserire nel nostro blog un numero di banner superiore alle capacità del layout ecco allora che potremmo utilizzare l’accortezza di confinarli all’interno di un rettangolo simile a una textarea.

Facciamo l’esempio di cinque banner creati con Online Banner Generator simili a questo

e vediamo come sarà possibile inserirli tutti in un rettangolo. Innanzitutto creiamolo con questo codice

<div style="width:500px; height: 150px; border: 1px solid #FFEAE9; overflow:auto;">
inserire i banner
</div>

dove 500 rappresenta la larghezza del rettangolo, 150 l’altezza, 1px la larghezza del bordo, solid il tipo di bordo (può anche essere scelto dotted – punteggiato o dashed – tratteggiato); overflow:auto; significa che il cursore sarà visibile solo se il contenuto eccederà la misura del rettangolo; #FFEAE9 è il colore di sfondo del rettangolo

Per inserire i banner questi vanno caricati su un servizio di hosting tipo Skydrive e ne dobbiamo acquisire l’URL.  In sostanza al posto di inserire i banner mettiamo un codice di questo tipo

<a href="URL_collegamento1"><img style="padding: 5px; " src="URL_immagine1" /></a><br />
<a href="URL_collegamento2"><img style="padding: 5px; " src="URL_immagine2" /></a><br />
<a href="URL_collegamento3"><img style="padding: 5px; " src="URL_immagine3" /></a><br />
<a href="URL_collegamento4"><img style="padding: 5px; " src="URL_immagine4" /></a><br />
<a href="URL_collegamento5"><img style="padding: 5px; " src="URL_immagine5" /></a><br />

dove <br/> rappresenta un salto alla riga successiva. Ecco quindi come si presenta un rettangolo creato con questo sistema

Ovviamente i dati in rosso devono essere personalizzati inserendo l’URL del collegamento a ciascun banner e l’URL del banner su Skydrive. A titolo di esempio posto su Google Sites tutto il codice utilizzato per questo box di banner.