HOWTO : posizionare una immagine (e il suo hover) a proprio piacimento in un sito

Pochi giorni fa, come qualcuno avrà notato, ho inserito sia nel blog che nelle altre parti del sito, una icona a forma di casetta, posizionata in alto a sinistra.

Credo (e spero!) che sia chiaro che indica la possibilità, cliccandoci sopra, di tornare alla home page del sito.

Poichè sarebbe stata una pazzia inserire l’immagine in ogni singola pagina, ho pensato di inserirla una sola volta, in un file che viene incluso in php col comando include.
In questo modo, sfruttando un file che viene sempre incluso in tutte le pagine (come l’header nel blog, e il file menu.php di sinistra, in tutte le altre parti del sito), l’icona apparirà facilmente in tutte le pagine.

Rimane però il problema di capire come posizionare una immagine in una maniera un pò più raffinata del semplice img, che non farebbe altro che piazzare l’immagine nel posto in cui si utilizza il tag img. Come piazzare però l’immagine in una posizione a proprio piacimento, magari dove non è possibile usare il tag img, con tanto di immagine di hover?

Il trucco sta nell’usare una classe nel proprio foglio di stile css per posizionare l’immagine in modo assoluto.

Si può creare nel proprio CSS una classe del tipo:

.home_absolute
{
position: absolute;
top: 182px;
left: 153px;
}

dove .home_absolute è il nome della classe assegnato a proprio piacimento.

position: absolute indica, per l’appunto, che l’immagine abbinata alla classe .home_absolute deve essere posizionata seguendo esclusivamente le direttive top e left.

top e left indicano la distanza, in pixel, a cui deve essere posizionata l’immagine dal bordo superiore dello schermo (in caso di top) e dal bordo sinistro (in caso di left).
In caso si vogliano usare il margine inferiore o destro, gli attributi giusti sono “bottom” e “right”.

A questo punto bisogna andare nella pagina dove si vuole appaia l’immagine posizionata in modo assoluto (nel mio caso in un file php che verrà incluso in tutte le pagine automaticamente) e usare questo codice:

Questo codice, nell’ordine, fa sì che l’immagine home_icon.png (la casetta in alto a sinistra) sia linkata alla home del sito index.php e utilizzi, per il posizionamento, la classe “home_absolute” creata prima nel foglio di stile. Alt e border sono tag trascurabili.

Come permettere che l’icona, per esempio, si illumini al passaggio del mouse per attirare l’attenzione?
Questa caratteristica si chiama hover e si realizza con la parte del codice qui evidenziata:

onmouseover="this.src='/img/home_icon_hover.png'" onmouseout="this.src='/img/home_icon.png'"

Il codice indica che, quando il mouse è sopra l’immagine (over), questa cambi da home_icon.png a home_icon_hover.png.

L’immagine di hover l’ho creata in Photoshop, prendendo semplicemente l’immagine originale, e sovrapponendola ad un layer rosso con una trasparenza a proprio piacimento.

That’s all, spero serva a qualcuno 🙂