Hur man gör en bild suddig när markören inte finns på den i Tumblr

Du kan skapa en fotoeffekt i ditt Tumblr -tema som visar en bild tydligt när musen svävar över bilden, men när musen inte svävar över bilden, bilden verkar suddig. Först, förbered de bilder 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, du behöver två nästan identiska bilder:en kopia av den ursprungliga klara bilden och en andra kopia av samma bild, bara suddig. Använd Blur -effekten 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 fragment av JavaScript -kod infogas mellan taggarna och i din Tumblr -blogg. JavaScript -koden inkluderar händelserna MouseRollover och MouseOut. Händelsen MouseRollover instruerar den tydliga bilden att visas när musen svävar över bilden. Händelsen MouseOut 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 URL:en för den tydliga originalbilden. Ändra "Picture2.jpg" -referensen till webbadressen för den suddiga bilden.

HTML -kod

HTML -koden som följer med Javascript -kodavsnittet definierar storleken, bildens placering och layout. Sätt in HTML -koden i Tumblr -temat där du vill att bildskärmen ska visas. HTML -koden som följer med Javascript -kodavsnittet ovan är:

Ersätt "Picture2.jpg" med webbadressen till det suddiga fotot, som visas som standard. Ändra variablerna “bredd” och “höjd” till önskad storlek på din återgivna bild.

Installera koden

För att installera koden i ditt Tumblr -tema, öppna din Tumblr -instrumentpanel, klicka sedan på "Anpassa" -fliken 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, tryck sedan på "Ctrl-C" för att kopiera koden. Klicka på utrymmet framför "" - taggen i din temakod, tryck sedan på "Ctrl-V" för att klistra in koden.

Kopiera HTML -koden, återgå sedan till temaredigeraren Tumblr. Hitta platsen i koden där du vill att fotoeffekten ska återges. Klicka på platsen, tryck sedan på "Ctrl-V" för att klistra in HTML-kodavsnittet. Klicka på "Förhandsgranska uppdatering" för att testa effekten i förhandsgranskningsfönstret. Klicka på "Spara" för att spara ändringarna.