Pubblicato il 01/06/11e aggiornato il

Come cambiare lo sfondo del blog al passaggio del mouse.

Qualche mese fa in questo commento mi fu chiesto se fosse possibile creare un sistema che permettesse agli utenti di scegliersi il colore di sfondo che preferivano. Sono riuscito a creare un widget molto carino che consente proprio di fare questa operazione. Per testarlo accedete sulla

Spostatevi con il mouse sulla tabella in alto a destra e, passando sopra a un riquadro colorato, si visualizzerà lo stesso background per tutto il blog

colori di background per il blog

I colori possono essere sostituiti da altri che considerate più adatti al vostro layout. Oltre a un colore di sfondo, può anche essere inserita una immagine. Potrebbe trattarsi di una foto con trasparenza in PNG in modo da usarla come una specie di filigrana. Nella demo linkata sopra, l'immagine di background l'ho inserita solo insieme al colore bianco. Per l'installazione dell'effetto si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla 

Successivamente si posiziona il widget dove riteniamo più opportuno. Si tratta di una tabella formata da dieci immagini inserite in due righe. Ciascuna immagine è formata da un quadrato di dimensioni di 23x21 pixel e ha lo stesso colore del codice che poi inseriremo come background. Ciascuna cella della tabella inizia con <td> e finisce con </td>. E' costruita mediante questa sintassi

<span onmouseover="javascript:document.body.style.backgroundColor='#c96d77'; document.body.style.backgroundImage='url(URL_IMMAGINE_SFONDO.PNG)';"><img border="1" src="https://lh4.googleusercontent.com/-Gp4z7ozi76Y/TeXxINpSdtI/AAAAAAAATWQ/4x5bLtKKZX4/rosa.png" /></span>

dove il codice del colore in rosso rappresenta il background che si visualizzerà quando il mouse cliccherà o passerà sopra all'immagine quadrata che è stata caricata su Picasa e che ha l'URL colorato di viola. Al posto della scritta in blu si può opzionalmente inserire l'indirizzo di una immagine. Il parametro inserito nella parte alta del codice, width="35%", serve per calibrare al meglio la tabella nella sidebar. 





8 commenti :

  1. Complimenti Ernesto. Proprio bello questo widget

    RispondiElimina
  2. Grazie infinite!
    Ero convinto che tu trovavi qualche soluzione!

    RispondiElimina
  3. ho aggiunto al mio blog il tuo antipixel

    RispondiElimina
  4. Altro bel trick complimenti,un po' che faccio e mi tocca rinominare il template con ideepercomputeredinternet.
    Venendo al sodo,ho trovato questo sito http://wn.com/Red_Bull_Skate_Shot_Finland che impiega più o meno quello da te proposto,come si puo integrare in un blog? o come si può modificare il tuo per avere lo stesso posizionamento\dimensioni (in alto\più piccolo su una linea sola).
    Aoh

    RispondiElimina
  5. @76ers
    Mi hai postato un video! Per modificare la poszione bisogna mettere mano al CSS che si trova qui
    https://docs.google.com/document/pub?id=1DgkNc8sRFXCZ7RbA5eLK9Sl7vMtEHzcLG_o1pDFAGto&pli=1
    Auguri :D

    RispondiElimina
  6. Ti ho postato la pagina del video,il widget è in alto a destra (ed è basato su j-query),perchè in home non c'è.
    Il tuo l'ho aggiusato un po' nelle dimensioni e mi piace,solo volevo sapere se è possibile inserirlo in alto a destra o anche sulla barra delle pagine statiche,invece che nella sidebar.
    Ciao e grazie

    RispondiElimina
  7. Scusa di nuovo,dimenticavo,altra cosa è possibile renderlo statico,cioè ricaricando la pagina il colore scelto rimane quello? cosa che fà quello che ti ho indicato.

    RispondiElimina
  8. @76ers
    Non lo avevo visto. Non si tratta di un sito su Blogger. Quello che si può fare su Blogger è indicato nel post.
    Il widget lo puoi inserire dove ti pare, nella parte alta o in quella bassa della pagina o anche sopra ai post.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.