Kako narediti zamegljenost slike, ko kurzorja ni na Tumblr

Fotografski učinek lahko ustvarite v svoji temi Tumblr, ki jasno prikaže sliko, ko miška lebdi nad sliko, potem pa, ko miška ne lebdi nad sliko, je slika zamegljena. Najprej pripravite slike, ki jih boste uporabili za učinek. Nato v temo Tumblr vstavite dva delčka kode. Upoštevajte, da koda ni podprta v objavah Tumblr, samo v temah blogov.

Pripravite slike

Za izvedbo naloge zamegljene slike boste potrebovali dve skoraj enaki sliki: eno kopijo izvirne jasne slike in drugo kopijo iste slike, samo zamegljeno. Uporabite učinek zameglitve v GIMP ali Photoshop, da ustvarite zamegljen videz druge fotografije. Poskrbite, da bodo slike popolnoma enake dimenzije.

Koda JavaScript

Delček kode JavaScript je vstavljen med in oznake vašega spletnega dnevnika Tumblr. Koda JavaScript vključuje dogodke MouseRollover in MouseOut. Dogodek MouseRollover naroči, da se prikaže jasna slika, ko miška lebdi nad sliko. Dogodek MouseOut določa, katero sliko prikazati, ko miška ne miši nad sliko.

Delček kode JavaScript, ki se uporablja za ta učinek, je:

Spremenite sklic »Picture1.jpg« na URL za čisto izvirno sliko. Spremenite sklic »Picture2.jpg« na URL zamegljene slike.

HTML koda

Koda HTML, ki spremlja delček kode Javascript, določa velikost, lokacijo in postavitev slike. V temo Tumblr vstavite kodo HTML, kjer želite, da se prikaže prikaz fotografij. Koda HTML, ki spremlja zgornji delček Javascripta, je:

Zamenjajte »Picture2.jpg« z URL-jem zamegljene fotografije, ki bo privzeto prikazana. Spremenljivki "širina" in "višina" spremenite v želeno velikost upodobljene slike.

Namestite kodo

Če želite namestiti kodo v svojo temo Tumblr, odprite nadzorno ploščo Tumblr in nato na nadzorni plošči kliknite zavihek »Prilagodi«, ki ga želite spremeniti v spletnem dnevniku. Kliknite možnost »Uredi HTML«, da odprete urejevalnik tem. Izberite delček kode Javascript, da označite kodo, nato pritisnite "Ctrl-C", da kopirate kodo. Kliknite presledek pred"V kodo teme, nato pritisnite" Ctrl-V ", da jo prilepite.

Kopirajte kodo HTML in se nato vrnite v urejevalnik tem Tumblr. V kodi poiščite mesto, kjer želite, da se učinek fotografije upodobi. Kliknite lokacijo in pritisnite “Ctrl-V”, da prilepite delček HTML. Kliknite »Posodobi predogled«, da preizkusite učinek v oknu Predogled. Kliknite »Shrani«, da shranite spremembe.