Ve svém motivu Tumblr můžete vytvořit fotografický efekt, který jasně zobrazí obrázek, když se myš umístí nad obrázek, ale poté, co se myš nad obrázek nepřesune, se obrázek zobrazí rozmazaný. Nejprve připravte obrázky, které použijete pro efekt. Poté vložte do svého motivu Tumblr dva fragmenty kódu. Upozorňujeme, že kód není podporován v příspěvcích Tumblr, pouze v tématech blogu.
Připravte obrázky
K splnění úkolu rozmazaného obrazu budete potřebovat dva téměř identické obrázky: jednu kopii původního jasného obrázku a druhou kopii stejného obrázku, pouze rozmazanou. K vytvoření rozmazaného vzhledu druhé fotografie použijte efekt Rozostření v GIMP nebo Photoshopu. Ujistěte se, že obrázky mají přesně stejné rozměry.
Kód JavaScript
Fragment kódu JavaScript je vložen mezi
a značky vašeho blogu Tumblr. Kód JavaScript zahrnuje události MouseRollover a MouseOut. Událost MouseRollover dá pokyn, aby se jasný obraz zobrazil, když nad ním přejedete myší. Událost MouseOut definuje, který obrázek se má zobrazit, když se myš nepřesune nad obrázek.Fragment kódu JavaScript, který se pro tento účel použije, je:
Změňte odkaz „Picture1.jpg“ na adresu URL pro jasný původní obrázek. Změňte odkaz „Picture2.jpg“ na adresu URL rozmazaného obrázku.
HTML kód
HTML kód doprovázející úryvek Javascript definuje velikost, umístění a rozložení obrázku. Vložte kód HTML do motivu Tumblr, kde se má zobrazit fotografie. HTML kód doprovázející výše uvedený fragment Javascript je:
Nahraďte soubor „Picture2.jpg“ adresou URL rozmazané fotografie, která se ve výchozím nastavení zobrazí. Změňte proměnné „width“ a „height“ na požadovanou velikost vykresleného obrázku.
Instalovat kód
Chcete-li nainstalovat kód do svého motivu Tumblr, otevřete panel Tumblr a poté klikněte na kartu „Přizpůsobit“ na panelu, který má blog upravit. Kliknutím na možnost „Upravit HTML“ otevřete editor motivů. Vyberte fragment kódu Javascript, abyste zvýraznili kód, a poté kód zkopírujte stisknutím kláves „Ctrl-C“. Klikněte na prostor před „“V kódu motivu a poté kód vložte pomocí„ Ctrl-V “.
Zkopírujte kód HTML a poté se vraťte do editoru motivů Tumblr. Najděte v kódu místo, kde chcete vykreslit fotografický efekt. Klikněte na dané místo a poté stisknutím kláves „Ctrl-V“ vložte fragment HTML. Kliknutím na „Aktualizovat náhled“ otestujete efekt v okně Náhled. Kliknutím na „Uložit“ změny uložíte.
