Du kan oprette en fotoeffekt i dit Tumblr-tema, der tydeligt viser et billede, når musen svæver over billedet, men når musen ikke svæver over billedet, vises billedet sløret. Forbered først de billeder, du vil bruge til effekten. Indsæt derefter to kodestykker i dit Tumblr-tema. Bemærk, at koden ikke understøttes i Tumblr-indlæg, kun i blogtemaer.
Forbered billeder
For at udføre den slørede billedopgave skal du bruge to næsten identiske billeder: en kopi af det originale klare billede og en anden kopi af det samme billede, kun sløret. Brug sløring-effekten i GIMP eller Photoshop til at skabe det slørede udseende på det andet foto. Sørg for, at billederne har de samme dimensioner.
JavaScript-kode
Et uddrag af JavaScript-kode indsættes mellem
og tags på din Tumblr-blog. JavaScript-koden inkluderer MouseRollover- og MouseOut-begivenhederne. MouseRollover-hændelsen instruerer det klare billede, der skal vises, når musen svæver over billedet. MouseOut-begivenheden definerer, hvilket billede der skal vises, når musen ikke svæver over billedet.JavaScript-kodestykket, der skal bruges til denne effekt, er:
Skift "Picture1.jpg" henvisning til URL'en for det klare originale billede. Skift "Picture2.jpg" henvisning til URL'en til det slørede billede.
HTML-kode
HTML-koden, der skal ledsage Javascript-uddraget, definerer billedets størrelse, placering og layout. Indsæt HTML-koden i Tumblr-temaet, hvor du vil have fotodisplayet. HTML-koden, der skal ledsage Javascript-uddraget ovenfor, er:
Udskift "Picture2.jpg" med URL'en til det slørede foto, som vises som standard. Skift variablerne "bredde" og "højde" til den ønskede størrelse på dit gengivne billede.
Installer kode
For at installere koden i dit Tumblr-tema skal du åbne dit Tumblr-dashboard og derefter klikke på fanen "Tilpas" i dashboardet, som bloggen kan ændre. Klik på "Rediger HTML" for at åbne temaeditoren. Vælg Javascript-kodestykket for at fremhæve koden, og tryk derefter på "Ctrl-C" for at kopiere koden. Klik på mellemrummet foran “”Tag i din temakode, og tryk derefter på“ Ctrl-V ”for at indsætte koden.
Kopier HTML-koden, og vend derefter tilbage til Tumblr-temaeditoren. Find placeringen i koden, hvor du vil have, at fotoeffekten skal gengives. Klik på placeringen, og tryk derefter på "Ctrl-V" for at indsætte HTML-kodestykket. Klik på "Opdater eksempelvisning" for at teste effekten i vinduet Eksempel. Klik på "Gem" for at gemme ændringerne.
