Kaip padaryti, kad vaizdas būtų neryškus, kai žymeklis nėra Tumblr

„Tumblr“ yra nemokama internetinė dienoraščių platforma, leidžianti sukurti tinklaraštį ir pritaikyti savo išvaizdą, įskaitant teminius vaizdus, ​​iš „Tumblr“ prietaisų skydelio. Kadangi turite prieigą prie „Tumblr“ HTML failo, galite pridėti specialių efektų, pvz., Atvaizdų, kurie neryškūs, kai pelės žymeklis nejudina virš vaizdo. Kad gautumėte šį efektą, turite įdėti „Tumblr“ kodavimo vaizdą „rollover“.

Apie „Image Rollover“

Vaizdo apvertimo „Javascript“ yra kodavimas, kuris pakeičia vaizdą, kai įkeliate pelės žymeklį ant nuotraukos. Kai perkeliate pelės žymeklį atokiau nuo vaizdo, jis grįžta į pradinę nuotrauką. Naudokite šią funkciją, jei norite persijungti tarp neryškaus vaizdo ir neaiškaus vaizdo. Šis efektas reikalauja, kad turite du skirtingus vaizdus, ​​kurie abu yra įkeliami į interneto svetainę, pvz., „Tumblr“.

Vaizdų kūrimas

Naudokite grafinio dizaino programą, pvz., „GIMP“ arba „Photoshop“, kad sukurtumėte antrą neryškią originalaus vaizdo versiją. Tai atlikite naudodami filtrą „Gaussian Blur“ ir išsaugokite vaizdą skirtingu failo pavadinimu. Tada „Tumblr“ tinklaraštyje sukurkite nuotraukų įrašą ir įkelkite abi nuotraukas į įrašą. Kai paskelbsite šį įrašą, jis sukuria kiekvieno vaizdo URL adresą. Žiūrėkite vaizdus naujame lange ir įrašykite URL adresus, kad galėtumėte naudoti paveikslėlio „rollover“ „Javascript“ nuotraukas.

Tumblr temos redagavimas

Dabar, kai turite URL neryškios ir neryškios nuotraukos versijos, redaguokite „Tumblr“ temą ir įdėkite „Javascript“ į HTML. Eikite į temos redaktorių, prisijunkite prie „Tumblr“ paskyros, spustelėdami savo dienoraščio pavadinimą ir pasirinkdami „Tinkinti išvaizdą“. Spustelėję mygtuką „Redaguoti HTML“, „Tumblr“ parodo savo dienoraščio temos HTML kodą kairėje srityje ir tinklaraščio išdėstymo dešinėje srityje peržiūra. Baigę redaguoti temą, spustelėkite „Atnaujinti peržiūrą“ ir „Išsaugoti“.

Image Rollover Javascript

Vaizdo apsukimo „Javascript“ šaltinio kodą galite rasti tinklalapyje, pvz., „Java-scripts.net“, „Designpalace“ arba „Javascript Kit“. Šį scenarijų sudaro dvi dalys; kodą, kurį įterpiate po žyma HTML ir kodą, kurį įterpiate, kur norite rodyti paveikslėlio apipavidalinimą. Redaguokite antrą kodo dalį, kad būtų įtraukti du įkeltų nuotraukų URL adresai. „Onmouseover“ vaizdas yra vaizdas, kurį vartotojas mato, kai jis nukreipia žymeklį ant nuotraukos. Čia įveskite URL, skirtą nespalvotai nuotraukos versijai. „Onmouseout“ atvaizdas yra vaizdas, kurį lankytojas mato, kai jis neperkelia pelės žymeklio ant nuotraukos. Čia įrašykite neryškios nuotraukos versijos URL adresą. Įvedę kodą, spustelėkite mygtuką „Atnaujinti peržiūrą“, kad pamatytumėte, kaip atrodo „Tumblr“ temoje paveikslėlis.