Du kan skapa en fotoeffekt i Tumblr-temat som visar en bild tydligt när musen svävar över bilden, men när musen inte svävar över bilden verkar bilden suddig. Förbered först bilderna du ska använda för effekten. Sätt sedan in två kodavsnitt i ditt Tumblr-tema. Observera att koden inte stöds i Tumblr-inlägg, bara i bloggteman.
Förbered bilder
För att utföra den suddiga bilduppgiften behöver du två nästan identiska bilder: en kopia av den ursprungliga klara bilden och en andra kopia av samma bild, bara suddig. Använd suddighetseffekten i GIMP eller Photoshop för att skapa det suddiga utseendet på det andra fotot. Se till att bilderna har exakt samma mått.
JavaScript-kod
Ett utdrag av JavaScript-kod infogas mellan
och taggar för din Tumblr-blogg. JavaScript-koden inkluderar händelserna MouseRollover och MouseOut. MouseRollover-händelsen instruerar den tydliga bilden som ska visas när musen svävar över bilden. MouseOut-händelsen definierar vilken bild som ska visas när musen inte svävar över bilden.JavaScript-kodavsnittet som ska användas för denna effekt är:
Ändra ”Picture1.jpg” -referensen till webbadressen för den tydliga originalbilden. Ändra ”Picture2.jpg” -referensen till webbadressen för den suddiga bilden.
HTML-kod
HTML-koden som medföljer Javascript-utdraget definierar bildens storlek, plats och layout. Sätt in HTML-koden i Tumblr-temat där du vill att fotovisningen ska visas. HTML-koden som medföljer Javascript-utdraget ovan är:
Ersätt "Picture2.jpg" med URL: en till det suddiga fotot, som visas som standard. Ändra variablerna "bredd" och "höjd" till önskad storlek på din återgivna bild.
Installera kod
För att installera koden i ditt Tumblr-tema, öppna din Tumblr-instrumentpanel och klicka sedan på fliken “Anpassa” i instrumentpanelen för att bloggen ska kunna ändras. Klicka på alternativet "Redigera HTML" för att öppna temaredigeraren. Välj Javascript-kodavsnittet för att markera koden och tryck sedan på "Ctrl-C" för att kopiera koden. Klicka på mellanslaget framför “”Tagg i din temakod och tryck sedan på“ Ctrl-V ”för att klistra in koden.
Kopiera HTML-koden och återgå sedan till Tumblr-temredigeraren. Hitta platsen i koden där du vill att fotoeffekten ska återges. Klicka på platsen och tryck sedan på "Ctrl-V" för att klistra in HTML-kodavsnittet. Klicka på "Uppdatera förhandsgranskning" för att testa effekten i förhandsgranskningsfönstret. Klicka på "Spara" för att spara ändringarna.
