<\/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>\ntop 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>\nonmouseover=\"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":[],"_links":{"self":[{"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/posts\/373"}],"collection":[{"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/comments?post=373"}],"version-history":[{"count":0,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/posts\/373\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/media?parent=373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/categories?post=373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/tags?post=373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"help\"](\"https:\/\/www.flapane.com\/blog\/wp-content\/uploads\/2009\/04\/help.jpg\")
<\/p>\n