{"id":373,"date":"2009-04-20T17:52:47","date_gmt":"2009-04-20T16:52:47","guid":{"rendered":"http:\/\/www.flapane.com\/blog\/?p=373"},"modified":"2017-12-29T16:10:57","modified_gmt":"2017-12-29T15:10:57","slug":"howto-posizionare-una-immagine-e-il-suo-hover-a-proprio-piacimento-in-un-sito","status":"publish","type":"post","link":"https:\/\/www.flapane.com\/blog\/2009\/04\/howto-posizionare-una-immagine-e-il-suo-hover-a-proprio-piacimento-in-un-sito\/","title":{"rendered":"HOWTO : posizionare una immagine (e il suo hover) a proprio piacimento in un sito"},"content":{"rendered":"

$\"help\"$ <\/p>\n

Pochi giorni fa, come qualcuno avr\u00e0 notato, ho inserito sia nel blog che nelle altre parti del sito, una icona a forma di casetta, posizionata in alto a sinistra.<\/p>\n

Credo (e spero!) che sia chiaro che indica la possibilit\u00e0, cliccandoci sopra, di tornare alla home page del sito.<\/p>\n

Poich\u00e8 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<\/a>.
\nIn 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\u00e0 facilmente in tutte le pagine.<\/p>\n

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

<\/p>\n

Il trucco sta nell’usare una classe nel proprio foglio di stile css<\/em> per posizionare<\/strong> l’immagine in modo assoluto<\/em><\/strong>.<\/p>\n

Si pu\u00f2 creare nel proprio CSS una classe del tipo:<\/span><\/p>\n

.home_absolute\r\n{\r\nposition: absolute;\r\ntop: 182px;\r\nleft: 153px;\r\n}<\/pre>\n<\/span>dove .home_absolute \u00e8 il nome della classe assegnato a proprio piacimento.<\/p>\n
position: absolute indica, per l’appunto, che l’immagine abbinata alla classe .home_absolute deve essere posizionata seguendo esclusivamente le direttive top<\/em><\/strong> e left<\/em><\/strong>.<\/p>\n
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).
\nIn caso si vogliano usare il margine inferiore o destro, gli attributi giusti sono “bottom” e “right”.<\/p>\n
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\u00e0 incluso in tutte le pagine automaticamente) e usare questo codice:<\/p>\n
Questo codice, nell’ordine, fa s\u00ec 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.<\/p>\n
Come permettere che l’icona, per esempio, si illumini al passaggio del mouse per attirare l’attenzione?
\nQuesta caratteristica si chiama hover<\/em><\/strong> e si realizza con la parte del codice qui evidenziata:<\/span><\/p>\n
onmouseover=\"this.src='\/img\/home_icon_hover.png'\" onmouseout=\"this.src='\/img\/home_icon.png'\"<\/pre>\n<\/span>Il codice indica che, quando il mouse \u00e8 sopra l’immagine (over), questa cambi da home_icon.png a home_icon_hover.png.<\/p>\n
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.<\/p>\n
That’s all, spero serva a qualcuno \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
Pochi giorni fa, come qualcuno avr\u00e0 notato, ho inserito sia nel blog che nelle altre parti del sito, una icona a forma di casetta, posizionata in alto a sinistra.<\/p>\n
Credo (e spero!) che sia chiaro che indica la possibilit\u00e0, cliccandoci sopra, di tornare alla home page del sito.
\nCome piazzare per\u00f2 l’immagine in una posizione a proprio piacimento, magari dove non \u00e8 possibile usare il tag ?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[108,24,109],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t