Jak v Tumblr vytvořit rozostřený obrázek, který se při najetí myší zobrazí ostrý

V blogovém motivu Tumblr můžete nastavit efekt, kdy se obrázek zobrazuje ostře při najetí myší a po odejmutí kurzoru se automaticky rozostří. K tomu potřebujete připravit dva téměř identické soubory – jeden ostrý a druhý rozostřený – a vložit do motivu krátký JavaScript a HTML kód. Tento postup funguje jen v motivu blogu, ne v jednotlivých příspěvcích.

Příprava obrázků

Pro požadovaný efekt budete potřebovat dvě verze stejného obrázku se stejnými rozměry:

• Originální, ostrý obrázek.
• Stejný obrázek upravený pomocí filtru Blur v GIMPu nebo Photoshopu.

Ujistěte se, že oba soubory mají přesně stejnou šířku a výšku.

JavaScript

Do sekce <head>…</head> motivu vložte následující skript. Obsahuje dva jednoduché eventy – MouseRollover (najetí) a MouseOut (odjetí).

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

Vyměňte Picture1.jpg za URL ostrého obrázku a Picture2.jpg za URL rozostřeného obrázku.

HTML

Na místo, kde má být efekt zobrazen, přidejte následující kód. Výchozí je rozostřený obrázek; při najetí myší se nahradí ostrým.

<div style="text-align:center;">
  <img src="Picture2.jpg"
       border="0"
       width="500"
       height="500"
       onmouseover="MouseRollover(this)"
       onmouseout="MouseOut(this)" />
</div>

Upravte src, width a height podle svých potřeb.

Instalace do motivu

1. Otevřete dashboard Tumblr a zvolte Customize u požadovaného blogu.
2. V editoru motivu klikněte na Edit HTML.
3. Vložte JavaScript kód těsně před uzavírací tag </head> (Ctrl + V).
4. Poté vložte HTML kód na místo, kde má být obrázek zobrazen.
5. V pravém panelu klikněte na Update Preview a ověřte, že efekt funguje.
6. Uložte změny kliknutím na Save.

Po dokončení bude váš obrázek ve výchozím stavu rozostřený a po najetí myší se zobrazí v plné ostrosti.