„Tumblr“ temoje galite sukurti nuotraukų efektą, kuris vaizdą aiškiai parodo, kai pelė užveda pelę virš paveikslėlio, bet tada, kai pelė neužveda virš vaizdo, vaizdas atrodo neryškus. Pirmiausia paruoškite vaizdus, kuriuos naudosite efektui. Tada į „Tumblr“ temą įterpkite du kodo fragmentus. Atminkite, kad kodas nepalaikomas „Tumblr“ pranešimuose, tik tinklaraščio temose.
Paruoškite vaizdus
Jei norite atlikti neryškaus vaizdo užduotį, jums reikės dviejų beveik identiškų vaizdų: vienos originalaus skaidraus vaizdo kopijos ir antros to paties vaizdo kopijos, tik neryškios. Norėdami sukurti neryškią antrosios nuotraukos išvaizdą, naudokite „Blur“ efektą GIMP ar „Photoshop“. Įsitikinkite, kad vaizdai yra visiškai vienodi.
„JavaScript“ kodas
Tarp „“ įterpiamas „JavaScript“ kodo fragmentas
ir jūsų „Tumblr“ tinklaraščio žymes. „JavaScript“ kodas apima „MouseRollover“ ir „MouseOut“ įvykius. „MouseRollover“ įvykis nurodo aiškų vaizdą rodyti, kai pelė užveda pelę virš vaizdo. „MouseOut“ įvykis nustato, kurį vaizdą rodyti, kai pelė neužveda virš paveikslėlio.Šiam efektui naudoti naudojamas „JavaScript“ kodo fragmentas:
Pakeiskite „Picture1.jpg“ nuorodą į išvalyto originalaus vaizdo URL. Pakeiskite „Picture2.jpg“ nuorodą į neryškaus vaizdo URL.
HTML kodas
HTML kodas, pateikiamas kartu su „Javascript“ fragmentu, apibrėžia vaizdo dydį, vietą ir išdėstymą. Įterpkite HTML kodą į temą „Tumblr“, kur norite, kad būtų rodomas nuotraukos ekranas. HTML kodas, pateikiamas kartu su aukščiau pateiktu „Javascript“ fragmentu, yra:
Pakeiskite „Picture2.jpg“ į neryškios nuotraukos URL, kuris bus rodomas pagal numatytuosius nustatymus. Pakeiskite kintamuosius „plotis“ ir „aukštis“ į norimą atvaizduoto dydžio dydį.
Įdiekite kodą
Norėdami įdiegti kodą „Tumblr“ temoje, atidarykite „Tumblr“ informacijos suvestinę, tada informacijos suvestinėje spustelėkite skirtuką „Tinkinti“, kad tinklaraštis galėtų jį modifikuoti. Spustelėkite parinktį „Redaguoti HTML“, kad atidarytumėte temos redaktorių. Pasirinkite „Javascript“ kodo fragmentą, kad paryškintumėte kodą, tada paspauskite „Ctrl-C“, kad nukopijuotumėte kodą. Spustelėkite tarpą priešais“Žymą temos kode, tada paspauskite„ Ctrl-V “, kad įklijuotumėte kodą.
Nukopijuokite HTML kodą, tada grįžkite į „Tumblr“ temų redaktorių. Kode raskite vietą, kurioje norite pateikti nuotraukų efektą. Spustelėkite vietą, tada paspauskite „Ctrl-V“, kad įklijuotumėte HTML fragmentą. Norėdami patikrinti efektą peržiūros lange, spustelėkite „Atnaujinti peržiūrą“. Spustelėkite „Išsaugoti“, kad išsaugotumėte pakeitimus.
