Kaip padaryti, kad vaizdas būtų neryškus, kai žymeklis yra ne Tumblr

Savo „Tumblr“ temoje galite sukurti nuotraukų efektą, rodantį aiškų vaizdą, kai pelė virsta virš nuotraukos, bet tada, kai pelė nejudėja virš vaizdo, vaizdas atrodo neryškus. Pirma, paruošite vaizdus, ​​kuriuos naudosite efektui. Tada į savo „Tumblr“ temą įterpkite du kodo fragmentus. Atkreipkite dėmesį, kad kodas „Tumblr“ įrašuose nepalaikomas, tik dienoraščio temose.

Pasiruošti vaizdams

Norint atlikti neryškią vaizdo užduotį, jums reikės dviejų beveik identiškų vaizdų : viena originalios aiškios nuotraukos kopija ir antrasis tos pačios nuotraukos kopija, tik neryškios. Naudokite „Blur“ efektą „GIMP“ arba „Photoshop“, kad būtų sukurta neryški antrosios nuotraukos išvaizda. Įsitikinkite, kad vaizdai yra tokie patys.

„JavaScript“ kodas

„& lt; head & gt; ir & lt; /head & gt; Tumblr tinklaraščio žymos. „JavaScript“ kodas apima „MouseRollover“ ir „MouseOut“ įvykius. „MouseRollover“ įvykis nurodo aiškų vaizdą rodyti, kai pelė virsta virš vaizdo. Įvykis „MouseOut“ apibrėžia, kokį vaizdą rodyti, kai pelės nėra virš nuotraukos.

„JavaScript“ kodo fragmentas, naudojamas šiam efektui, yra:

& lt; script language = "javascript" & gt ; funkcija MouseRollover (MyImage) {MyImage.src = "Picture1.jpg"; } funkcija MouseOut (MyImage) {MyImage.src = "Picture2.jpg"; } & lt; /script & gt;

Pakeiskite „Picture1.jpg“ nuorodą į aiškaus originalaus vaizdo URL. Pakeiskite „Picture2.jpg“ nuorodą į neryškaus vaizdo URL.

HTML kodas

HTML kodas, kuris pridedamas prie „Javascript“ fragmento, apibrėžia dydį, vietą ir vaizdo išdėstymas. Įdėkite HTML kodą į „Tumblr“ temą, kurioje norite rodyti nuotraukų rodymą. HTML kodas, kurį reikia pateikti kartu su „Javascript“ fragmentu, yra:

& lt; div align = "centras" & gt; & lt;! - Čia rodomas vaizdas .-- & gt; & lt; img src = "Picture2.jpg" border = "0px" width = "500px" height = "500px" onMouseOver = "MouseRollover (tai)" onMouseOut = "MouseOut (tai)" /& gt; & lt; /div & gt;

Pakeiskite „Picture2.jpg“ URL į neryškią nuotrauką, kuri bus rodoma pagal numatytuosius nustatymus. Pakeiskite „pločio“ ir „aukščio“ kintamuosius į pageidaujamą atvaizdo dydį.

Įdiegti kodą

Jei norite įdiegti kodą į „Tumblr“ temą, atidarykite Tumblr prietaisų skydelis, tada spustelėkite skirtuką „Tinkinti“, kad tinklaraštis pakeistų. Jei norite atidaryti temos redaktorių, spustelėkite parinktį „Redaguoti HTML“. Pasirinkite „Javascript“ kodo fragmentą, kad pažymėtumėte kodą, tada paspauskite „Ctrl-C“, kad kopijuotumėte kodą. Spustelėkite vietos temos kodo prieš žymę „& lt; /head & gt;“, tada spauskite „Ctrl-V“, kad įklijuotumėte kodą.

Nukopijuokite HTML kodą, tada grįžkite į „Tumblr“ temos redaktorių . Suraskite vietą kode, kur norite, kad nuotrauka veiktų. Spustelėkite vietą, tada paspauskite „Ctrl-V“, kad įklijuotumėte HTML fragmentą. Spustelėkite „Atnaujinti peržiūrą“, kad patikrintumėte efektą peržiūros lange. Spustelėkite „Išsaugoti“, kad išsaugotumėte pakeitimus.

URL:https://lt.whycomputer.com/software/100418951.html