Tumblr motīvā varat izveidot fotoattēla efektu, kas skaidri parāda attēlu, kad peles kursors atrodas virs attēla, bet tad, kad pele nenovieto virs attēla, attēls šķiet neskaidrs. Vispirms sagatavojiet attēlus, kurus izmantosiet efektam. Pēc tam savā Tumblr motīvā ievietojiet divus koda fragmentus. Ņemiet vērā, ka kods netiek atbalstīts Tumblr ziņās, tikai emuāra tēmās.
Sagatavojiet attēlus
Lai izpildītu neskaidra attēla uzdevumu, jums būs nepieciešami divi gandrīz identiski attēli: viena oriģināla skaidra attēla kopija un otra tā paša attēla kopija, tikai neskaidra. Izmantojiet aizmiglojuma efektu GIMP vai Photoshop, lai izveidotu neskaidru otrā fotoattēla izskatu. Pārliecinieties, ka attēliem ir tieši tādi paši izmēri.
JavaScript kods
Starp kodu tiek ievietots JavaScript koda fragments
un jūsu Tumblr emuāra tagus. JavaScript kods ietver MouseRollover un MouseOut notikumus. Notikums MouseRollover norāda skaidru attēlu, lai tas tiktu parādīts, kad pele virzās virs attēla. Notikums MouseOut nosaka, kuru attēlu parādīt, kad pele nav virzījusies virs attēla.Šim efektam jāizmanto JavaScript koda fragments:
Mainiet atsauci “Picture1.jpg” uz URL, lai notīrītu sākotnējo attēlu. Mainiet “Picture2.jpg” atsauci uz neskaidra attēla URL.
HTML kods
HTML kods, kas pievienots Javascript fragmentam, nosaka attēla lielumu, atrašanās vietu un izkārtojumu. Ievietojiet HTML kodu tēmā Tumblr, kur vēlaties, lai tiktu parādīts fotoattēlu displejs. HTML kods, kas pievienots iepriekšminētajam Javascript fragmentam, ir:
Aizstājiet “Picture2.jpg” ar aizmiglota fotoattēla URL, kas tiks parādīts pēc noklusējuma. Mainiet mainīgos “platums” un “augstums” uz vēlamo renderētā attēla izmēru.
Instalēt kodu
Lai instalētu kodu savā Tumblr motīvā, atveriet Tumblr informācijas paneli un pēc tam informācijas panelī noklikšķiniet uz cilnes “Pielāgot”, lai emuārs varētu modificēt. Noklikšķiniet uz opcijas Rediģēt HTML, lai atvērtu motīvu redaktoru. Atlasiet Javascript koda fragmentu, lai izceltu kodu, pēc tam nospiediet taustiņu “Ctrl-C”, lai kopētu kodu. Noklikšķiniet uz vietas priekšā “”Tagu tēmas kodā, pēc tam nospiediet taustiņu“ Ctrl-V ”, lai ielīmētu kodu.
Nokopējiet HTML kodu un pēc tam atgriezieties Tumblr motīvu redaktorā. Kodā atrodiet vietu, kur vēlaties attēlot fotoattēla efektu. Noklikšķiniet uz atrašanās vietas un pēc tam nospiediet taustiņu “Ctrl-V”, lai ielīmētu HTML fragmentu. Noklikšķiniet uz “Atjaunināt priekšskatījumu”, lai pārbaudītu efektu logā Priekšskatījums. Noklikšķiniet uz Saglabāt, lai saglabātu izmaiņas.
