È possibile creare un effetto fotografico nel tema Tumblr che visualizzi un'immagine chiaramente quando il mouse passa sopra l'immagine, ma poi quando il mouse non passa sopra immagine, l'immagine appare sfocata. Innanzitutto, prepara le immagini che utilizzerai per l'effetto. Quindi inserisci due frammenti di codice nel tema Tumblr. Si noti che il codice non è supportato nei post di Tumblr, ma solo nei temi del blog.
Prepara immagini
Per eseguire l'attività di immagine sfocata, sono necessarie due immagini quasi identiche : una copia dell'immagine chiara 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 le stesse dimensioni.
Codice JavaScript
Uno snippet di codice JavaScript è inserito tra & lt; head & gt; e & lt; /head & gt; 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 è:
& lt; script language = "javascript" & gt ; funzione MouseRollover (MyImage) {MyImage.src = "Picture1.jpg"; } funzione MouseOut (MyImage) {MyImage.src = "Picture2.jpg"; } & lt; /script & gt;
Modifica il riferimento “Picture1.jpg” all'URL per l'immagine originale chiara. Modifica il riferimento "Picture2.jpg" all'URL per l'immagine sfocata.
Codice HTML
Il codice HTML che accompagna lo snippet JavaScript definisce le dimensioni, la posizione e layout dell'immagine. Inserisci il codice HTML nel tema Tumblr in cui desideri che appaia la visualizzazione della foto. Il codice HTML che accompagna lo snippet Javascript sopra è:
& lt; div align = "center" & gt; & lt;! - L'immagine viene visualizzata qui. & & gt; & lt; img src = "Picture2.jpg" border = "0px" width = "500px" height = "500px" onMouseOver = "MouseRollover (this)" onMouseOut = "MouseOut (this)" /& gt; & lt; /div & gt;
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.
Installa codice
Per installare il codice nel tuo tema Tumblr, apri il tuo Dashboard di Tumblr, quindi fai clic sulla scheda "Personalizza" nella dashboard per la modifica del blog. Fai clic sull'opzione "Modifica HTML" per aprire l'editor dei temi. Seleziona lo snippet di codice Javascript per evidenziare il codice, quindi premi "Ctrl-C" per copiare il codice. Fai clic sullo spazio davanti al tag "& lt; /head & gt;" 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. Fai clic nella posizione, quindi premi "Ctrl-V" per incollare lo snippet HTML. Fai clic su "Aggiorna anteprima" per testare l'effetto nella finestra Anteprima. Fai clic su "Salva" per salvare le modifiche.
Computer © www.354353.com