Puoi creare un effetto foto nel tuo tema Tumblr che mostra chiaramente un'immagine quando il mouse passa sopra l'immagine, ma poi quando il mouse non passa sopra l'immagine, l'immagine appare sfocata. Per prima cosa, prepara le immagini che utilizzerai per l'effetto. Quindi inserisci due frammenti di codice nel tuo tema Tumblr. Nota che il codice non è supportato nei post di Tumblr, solo nei temi del blog.
Prepara le immagini
Per eseguire l'attività di immagine sfocata, avrai bisogno di due immagini quasi identiche: una copia dell'immagine nitida originale e una seconda copia della stessa immagine, solo sfocata. Usa l'effetto Sfocatura in GIMP o Photoshop per creare l'aspetto sfocato della seconda foto. Assicurati che le immagini abbiano esattamente le stesse dimensioni.
Codice JavaScript
Uno snippet di codice JavaScript viene inserito tra i
e tag del tuo blog Tumblr. Il codice JavaScript include gli eventi MouseRollover e MouseOut. L'evento MouseRollover indica all'immagine chiara di essere visualizzata quando il mouse passa sopra l'immagine. L'evento MouseOut definisce quale immagine visualizzare quando il mouse non passa sopra l'immagine.Lo snippet di codice JavaScript da utilizzare per questo effetto è:
Cambia il riferimento "Picture1.jpg" all'URL per l'immagine originale chiara. Cambia il riferimento "Picture2.jpg" all'URL per l'immagine sfocata.
Codice HTML
Il codice HTML che accompagna lo snippet Javascript definisce la dimensione, la posizione e il layout dell'immagine. Inserisci il codice HTML nel tema di Tumblr dove vuoi che appaia la visualizzazione delle foto. Il codice HTML che accompagna lo snippet Javascript sopra è:
Sostituisci "Picture2.jpg" con l'URL della foto sfocata, che verrà visualizzata per impostazione predefinita. Modifica le variabili "larghezza" e "altezza" nella dimensione desiderata dell'immagine renderizzata.
Codice di installazione
Per installare il codice nel tuo tema Tumblr, apri la dashboard di Tumblr, quindi fai clic sulla scheda "Personalizza" nella dashboard per modificare il blog. Fare clic sull'opzione "Modifica HTML" per aprire l'editor del tema. Seleziona lo snippet di codice Javascript per evidenziare il codice, quindi premi "Ctrl-C" per copiare il codice. Fare clic sullo spazio davanti al "" nel codice del tema, quindi premi "Ctrl-V" per incollare il codice.
Copia il codice HTML, quindi torna all'editor dei temi di Tumblr. Trova la posizione nel codice in cui desideri eseguire il rendering dell'effetto foto. Fare clic nella posizione, quindi premere "Ctrl-V" per incollare lo snippet HTML. Fare clic su "Aggiorna anteprima" per testare l'effetto nella finestra Anteprima. Fare clic su "Salva" per salvare le modifiche.
