In questo articolo vedremo come sia possibile ottenere un header, ovvero un'intestazione, con uno sfondo casuale.
I modi possibili sono due: uno è lato client grazie a Javascript, l'altro è lato server, grazie a linguaggi come ASP o PHP. Li vedremo entrambi: per la versione lato server ho optato per PHP, ma lo script è così semplice che con un minimo di conoscenza vi sarà facile riadattarlo in qualsiasi altra tecnologia. Iniziamo subito.
Come procedere
Anzitutto, vediamo subito uno dei sue esempi che ho preparato. Si tratta della versione Javascript, ma la versione PHP è sostanzialmente identica. Provate a riaggiornare la pagina o a cliccare sul titolo Il logo qui e noterete che l'immagine di sfondo dell'intestazione cambia: lo stesso effetto potrà essere ovviamente ottenuto su tutte le pagine dei vostri siti: sia la versione Javascript che quella PHP necessiteranno dell'aggiunta di una sola riga nella sezione head della pagina. Vediamo come procedere.
La prima cosa da fare è disporre o realizzare una pagina con HTML e CSS. Ecco qui quella che ho preparato come base dell'esempio. Vediamo le parti essenziali, partendo dall'HTML:
<div id="header">
<h1><a href="#">Il logo qui</a></h1>
</div>
Ora la parte importante del CSS ai fini della tecnica. L'header sarà largo 600 pixel e alto 200, e mostrerà il titolo (che in casi reali sarà il link che punta alla home page) in una data posizione:
div#header{position:relative;width:600px;height:200px}
div#header h1{position:absolute;top:30px;left: 30px}
div#header a{color: #FF5026;text-decoration: none}
Per consentire il posizionamento assoluto al suo interno, è importante dichiarare il posizionamento relativo dell'header, insieme alle due dimensioni. L'h1 viene posizionato assolutamente. Ovviamente potrete scegliere differenti coordinate, specificando top o bottom per la posizione verticale e left o right per quella orizzontale.
Infine, al titolo, che è anche un link, viene assegnato un colore e tolta la sottolineatura. È importante che il colore del testo abbia un buon contrasto nella posizione che occupa per tutte le immagini che vorremo usare.
La versione Javascript
Rivediamo la versione Javascript della pagina con immagini casuali che abbiamo presentato in apertura. Rispetto alla versione di base nell'HTML è stata aggiunta la seguente riga:
<script type="text/Javascript" src="randomHeader.js"></script>
Lo script, molto breve e di facile configurazione anche per chi non è pratico di Javascript, si occuperà quindi di attribuire al nostro header un'immagine casuale tra quelle che avremo scelto. Vediamolo per intero: in grassetto ho riportato le parti che andranno modificate secondo lo vostre esigenze.
var id="header";
var imgArray=new Array("sfondo1.jpg","sfondo2.jpg","sfondo3.jpg",
"sfondo4.jpg","sfondo5.jpg","sfondo6.jpg");
// da qui in poi non sono necessarie modifiche
if(document.getElementById) MakeHeader();
function MakeHeader(){
var el=document.getElementById(id);
if(el) el.style.background="url("+RandomImage()+")";
else setTimeout("MakeHeader()",100);
}
function RandomImage(){
return(imgArray[Math.round(Math.random()*(imgArray.length-1))]);
}
Nella prima riga dello script, quella che riporta var id="header"; tra le virgolette andrà indicato l'id dell'elemento su cui applicare lo sfondo casuale. Se userete div id="header" nell'HTML non ci saranno necessità di modifiche.
Ora nella seconda riga ed eventualmente nelle successive, separati da una virgola indicheremo i nomi dei file da usare come sfondi casuali sull'header. È importante che al termine dell'elenco ci sia la parentesi chiusa e il punto e virgola. Tutto qui: rivediamo l'esempio.
Prima di passare alla versione con PHP, un piccolo dettaglio sull'implementazione: l'immagine di sfondo viene aggiunta all'header appena questo è disponibile nel DOM, con una tecnica temporizzata simile a quella di cui abbiamo parlato nell'articolo «Image Replacement con Javascript».
La versione PHP
La versione Javascript che abbiamo appena visto è semplice e di facile uso. Ha solo un piccolo svantaggio: non funziona se l'utente ha Javascript disabilitato, anche se il 90-95% degli utenti potanno comunque beneficiarne. Ma se lo spazio web che ospita il nostro sito dispone di PHP possiamo pensare ad un'alternativa lato server.
Ecco l'esempio con il PHP, anche in questo caso l'implementazione è davvero semplice. Rispetto alla versione di base nell'html anche in questo caso è stata aggiunta una sola riga:
<link rel="stylesheet" type="text/css" href="RandomHeader.php">
La prima cosa da notare è che il file RandomHeader.php in realtà serve un foglio di stile. In sostanza genererà un file che viene interpretato come CSS dai browser, con un'unica regola:
div#header{background: url(ilnomediunimmaginecasuale);}
Vediamo ora il suo contenuto, con evidenziate le parti da personalizzare:
<?
$id="header";
$headerImg=array("sfondo1.jpg","sfondo2.jpg","sfondo3.jpg",
"sfondo4.jpg","sfondo5.jpg","sfondo6.jpg");
header("Content-type: text/css");
srand((double) microtime()*1000000);
echo "#".$id."{background: url(".$headerImg[rand(0,count($headerImg)-1)].")}";
?>
Anche in questo caso potremo specificare l'id dell'elemento su cui applicare l'immagine casuale nella prima riga di codice e nella seconda riga, sempre tra virgolette, i nomi dei file tra cui sceglierla.
Per chi è un po' pratico di PHP, c'è da notare che l'istruzione header("Content-type: text/css"); serve per indicare al browser che il file php generato dal server andrà interpretato come CSS.
Prima di concludere, una piccola nota: per le prove in locale dovrete disporre di PHP installato sul vostro computer. Il PHP è già disponibile nativamente su sistemi Unix, Linux e Mac. Per chi ha Windows il mio consiglio è di scaricare EasyPhp, o più semplicemente fare le prove direttamente on-line sullo spazio web con hosting PHP.
Conclusioni e download
Abbiamo visto due possibili modi per avere un header con immagini casuali. Tra le due versioni, se disponete di PHP quella lato server è da preferire, dato che si rivela leggermente più veloce e sarà servita a tutti gli utenti e non solo quelli con Javascript abilitato.
Per le immagini potrete usare delle vostre foto o immagini digitali, oppure cercarle in uno dei tanti siti di stock photo (un paio sono StockVault o Stock.XCHNG) come ho fatto io per l'esempio di questo articolo. Codice ed esempi sono disponibili per il download. Alla prossima.
