Jak vytvořit rozostření obrázku, když kurzor na něm není v Tumblr

V motivu Tumblr můžete vytvořit fotografický efekt, který zobrazuje obraz jasně, když se myš pohybuje nad obrázkem, ale když se myš nad obrazem nehýká, obraz se jeví jako rozmazaný. Nejprve připravte obrázky, které použijete pro daný efekt. Pak vložte dva úryvky kódu do motivu Tumblr. Nezapomeňte, že kód není v příspěvcích Tumblr podporován, pouze v tématech blogu.

Připravit obrázky

Chcete-li splnit úlohu rozmazaného obrazu, budete potřebovat dva téměř identické obrázky : jedna kopie původního jasného obrazu a druhá kopie stejného obrazu, pouze rozmazané. Pomocí efektu Rozostření v aplikaci GIMP nebo Photoshop vytvořte rozmazaný vzhled druhé fotografie. Ujistěte se, že obrázky mají stejné rozměry.

Kód JavaScript

Mezi znak & lt; head & gt; a & lt; /head & gt; značky vašeho blogu Tumblr. Kód JavaScript obsahuje události MouseRollover a MouseOut. Událost MouseRollover instruuje jasný obraz, aby se zobrazil, když se myš pohybuje nad obrázkem. Událost MouseOut definuje, který obrázek se má zobrazit, když myš není nad obrázkem.

Úryvek kódu JavaScript, který se má použít pro tento efekt, je:

& lt; script language = "javascript" & gt ; function MouseRollover (MyImage) {MyImage.src = "Picture1.jpg"; } funkce MouseOut (MyImage) {MyImage.src = "Picture2.jpg"; } & lt; /script & gt;

Změňte odkaz „Picture1.jpg“ na adresu URL pro čistý původní obraz. Změňte odkaz „Picture2.jpg“ na adresu URL pro rozmazaný obraz.

Kód HTML

Kód HTML, který je připojen k fragmentu Javascript, definuje velikost, umístění a rozložení obrázku. Vložte HTML kód do motivu Tumblr, kde chcete zobrazit zobrazení fotografie. Kód HTML, který je připojen k útržku Javascript výše, je:

& lt; div align = "center" & gt; & lt;! - Zobrazuje se zde obrázek .-- & gt; & lt; img src = "Picture2.jpg" border = "0px" width = "500px" height = "500px" onMouseOver = "MouseRollover (to)" onMouseOut = "MouseOut (this)" /& gt; & lt; /div & gt;

Nahradit „Picture2.jpg“ adresou URL na rozmazané fotografii, která bude standardně zobrazena. Změňte proměnné „width“ a „height“ na požadovanou velikost vykresleného obrázku.

Instalovat kód

Chcete-li kód nainstalovat do motivu Tumblr, otevřete svůj Ovládací panel Tumblr pak klepněte na kartu „Přizpůsobit“ v řídicím panelu blogu, který chcete upravit. Klepnutím na možnost „Upravit HTML“ otevřete editor motivu. Chcete-li kód zvýraznit, vyberte fragment kódu Javascript a stisknutím klávesy „Ctrl-C“ kód zkopírujte. Klikněte na místo před značkou „& lt; /head & gt;“ v kódu motivu a poté vložte kód stisknutím klávesy Ctrl-V.

Zkopírujte kód HTML a vraťte se do editoru motivů Tumblr . Vyhledejte umístění v kódu, kde chcete vykreslit efekt fotografie. Klikněte na místo a poté stisknutím klávesy Ctrl-V vložte fragment kódu HTML. Kliknutím na tlačítko „Aktualizovat náhled“ otestujete efekt v okně Náhled. Změny uložíte kliknutím na tlačítko „Uložit“
URL:https://cs.whycomputer.com/Software/100118951.html