Sicuramente non è una novità, anche se in definitiva questa tecnica è poco usata. Si tratta di creare una serie d’immagini personalizzate che appaiono sul nostro blog o sito e che cambiano a secondo del momento della giornata in cui i nostri visitatori vi accedono.
Detto così sembra un po’ complicato, ma non lo è affatto.
Prendiamo ad esempio il modello che ho utilizzato su questo sito.
Ho creato una serie di “scenette” in cui il protagonista (Liuky) si comporta in base all’orario.
Lo troveremo così di notte che dorme nel suo letto, la mattina a far colazione, poi recarsi a lavoro, mangiare, ecc.
Il nome di ogni immagine contiene il numero dell’orario a cui si riferisce.
Troveremo così Liuky12.png, Liuky13.png, Liuky14.png, ecc. (ad indicare le ore 12, 13, 14, e così via)
Una volta create le immagini e rinominate con il numero sequenziale (da 00 a 23), non rimane che caricarle sul nostro spazio web e creare il riferimento sul blog.
Per fare quest’ultimo passo, non ci rimane che recuperare dalla rete il codice per associare un’immagine ad una determinata ora. Avendo io applicato quest’effetto su un blog wordpress, ho utilizzato un semplicissimo codice in PHP, ma non sarà affatto difficile trovare qualcosa di analogo in ASP o anche in Javascript, in base alla piattaforma del nostro blog.
Su Wordpress ho utilizzato il seguente codice:
<div style=”position:absolute; right:0px; top:0px; z-index:1″>
<img src=”http://webomatic.netsons.org/liuky/LIUKY<?php echo date(’H'); ?>.PNG” border=”0″ />
</div>
(Mi raccomando alla H maiuscola)
Ora che abbiamo il codice andiamolo ad applicare alle nostra pagina.
Io ad esempio l’ho inserito su header.php (Aspetto > Editor temi > Testata), alla fine di tutto il codice già presente.
Naturalmente si può spostare a destra o a sinistra semplicemente sostituendo “right” con “left”.
Se vogliamo possiao applicare l’effetto ad altre caratteristiche del nostro blog, come lo sfondo o l’intera immagine di testa e magare applicando degli effetti di luce od ombra in base all’orario.
Qui trovate i file utilizzati nell’esempio. [File modificato l’ 11/05/2008]
(1 voti, media: 5 su 5)
Loading ...
Lascia un commento