whycomputer.com >> Datornätverk >  >> Programvara

Skapa en suddig bildeffekt i Tumblr – Bild suddig när muspekaren är borta

Du kan skapa en bildeffekt i ditt Tumblr‑tema som visar en klar bild när muspekaren är över bilden, men blir suddig när muspekaren lämnar den. Först förbereder du bilderna, sedan lägger du till två kodavsnitt i ditt Tumblr‑tema. Observera att koden endast fungerar i temainställningar, inte i inlägg.

Förbered bilderna

Du behöver två nästan identiska bilder: en klar originalbild och en suddig kopia av samma bild. Använd GIMP eller Photoshop för att skapa suddigheten. Se till att båda bilderna har exakt samma dimensioner.

JavaScript‑kod

Placera följande JavaScript‑kod mellan <head> och </head> i ditt Tumblr‑tema. Koden hanterar onmouseover och onmouseout-händelserna.

<script language="javascript">
function MouseRollover(img) { img.src = "Picture1.jpg"; }
function MouseOut(img) { img.src = "Picture2.jpg"; }
</script>

Byt ut Picture1.jpg mot URL‑adressen för den klara originalbilden, och Picture2.jpg mot URL‑adressen för den suddiga bilden.

HTML‑kod

HTML‑koden definierar storlek, position och layout för bilden. Placera den där du vill att effekten ska visas i temat.

<div align="center">
  <!-- Bild visas här -->
  <img src="Picture2.jpg" border="0" width="500" height="500"
       onmouseover="MouseRollover(this)" onmouseout="MouseOut(this)" />
</div>

Byt Picture2.jpg mot URL‑adressen för den suddiga bilden som visas som standard. Justera width och height efter önskad storlek.

Installera koden

  1. Öppna ditt Tumblr‑instrumentpanel och klicka på Customize för det bloggt du vill ändra.
  2. Välj Edit HTML för att öppna temaredigeraren.
  3. Kopiera JavaScript‑koden: markera koden och tryck Ctrl+C.
  4. Klistra in den före </head>‑taggen med Ctrl+V.
  5. Klistra sedan in HTML‑koden där du vill att bilden ska dyka upp.
  6. Klicka på Update Preview för att se effekten, och sedan på Save för att spara ändringarna.

URL:https://sv.whycomputer.com/programvara/1014018951.html

Programvara
  • Hur man skapar ett 3D-stereogram

    Stereogram, eller autostereogram, är optiska illusioner som visar en dold bild inom en 2‑D‑bild. Genom att korsa ögonen kan du se den dolda bilden som uppenbarar sig som ett tredimensionellt objekt. En välgjord stereogram kräver tid och precision, men moderna ritprogram gör det enkelt att skapa dem.

  • Så skapar du ovala bildramar

    En bildram lyfter fram en bild och gör den mer elegant, professionell eller lekfull. Du behöver inte begränsa dig till den traditionella rektangeln – en oval ram ger din bild en unik touch. Du kan skapa en oval ram med onlinebildredigerare eller på din dator. Skapa en oval bild och ram Steg 1 Besök

  • Så här gör du bilden på din skärm skarpare

    Gör din skärmskärpa bättre Genom att justera skärmupplösningen på din dator eller laptop kan du få bilderna på skärmen att se skarpare och tydligare ut. Lägre upplösning, till exempel 800×600, ger större bilder som ofta blir korniga och suddiga. Högre upplösning, som 1680×1050, ger mindre, mer detal

Datornätverk © https://sv.whycomputer.com