Ako rozostriť obrázok, keď na ňom kurzor nie je v Tumblr

V téme Tumblr môžete vytvoriť fotografický efekt, ktorý obraz jasne zobrazuje, keď sa myš vznáša nad obrázkom, ale potom, keď sa kurzor myši nehýbe nad Obrázok sa javí ako rozmazaný. Najskôr pripravte obrázky, ktoré budete používať pre daný efekt. Potom do témy Tumblr vložte dva útržky kódu. Všimnite si, že kód nie je podporovaný v príspevkoch Tumblr, iba v témach blogu.

Príprava obrázkov

Na splnenie úlohy rozmazaného obrázka budete potrebovať dva takmer identické obrázky. : jedna kópia pôvodného jasného obrázka a druhá kópia toho istého obrázka, iba rozmazaná. Na vytvorenie rozmazaného vzhľadu druhej fotografie použite efekt Rozostrenie v GIMP alebo Photoshop. Uistite sa, že obrázky majú presne rovnaké rozmery.

Kód JavaScript

Útržok kódu JavaScript je vložený medzi & head; a

značiek vášho blogu Tumblr. Kód JavaScript obsahuje udalosti MouseRollover a MouseOut. Udalosť MouseRollover dá pokyn, aby sa jasný obraz zobrazil, keď sa myš vznáša nad obrázkom. Udalosť MouseOut definuje, ktorý obrázok sa má zobraziť, keď sa kurzor myši nezmení nad obrázok.

Útržok kódu JavaScript, ktorý sa má použiť na tento účel, je:

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

Zmeňte odkaz „Picture1.jpg“ na adresu URL pre jasný pôvodný obrázok. Zmeňte odkaz „Picture2.jpg“ na adresu URL rozmazaného obrázka.

Kód HTML

Kód HTML, ktorý sprevádza útržok kódu Javascript, definuje veľkosť, umiestnenie a rozloženie obrázka. Vložte kód HTML do témy Tumblr, na ktorej sa má zobraziť fotografia. HTML kód, ktorý sprevádza vyššie uvedený útržok kódu Javascript, je:

div align = "center" & gt; & lt;! - Tu sa zobrazuje obrázok. & lt; img src = "Picture2.jpg" border = "0px" width = "500px" height = "500px" onMouseOver = "MouseRollover (this)" onMouseOut = "MouseOut (this)" /& gt;

Nahraďte „Picture2.jpg“ adresou URL rozmazanej fotografii, ktorá sa bude predvolene zobrazovať. Zmeňte premenné „šírka“ a „výška“ na požadovanú veľkosť vykresleného obrázka.

Nainštalovať kód

Ak chcete nainštalovať kód do témy Tumblr, otvorte svoj Na paneli Tumblr kliknite na karte Prispôsobiť na hlavnom paneli blogu, ktorý chcete upraviť. Kliknutím na možnosť „Upraviť HTML“ otvoríte editor tém. Vyberte útržok kódu Javascript, aby ste zvýraznili kód, a potom stlačte „Ctrl-C“ a skopírujte kód. Kliknite na medzeru pred značkou „& lt; /head & gt;“ v kóde témy a potom stlačením klávesu „Ctrl-V“ kód prilepte.

Skopírujte kód HTML a potom sa vráťte do editora motívov Tumblr. , Nájdite miesto v kóde, kde chcete, aby sa efekt fotografie vykreslil. Kliknutím na umiestnenie a prilepením útržku kódu HTML stlačte klávesovú skratku „Ctrl-V“. Kliknutím na „Aktualizovať ukážku“ otestujete efekt v okne Náhľad. Zmeny uložíte kliknutím na tlačidlo „Uložiť“

• Predchádzajúca strana: Môžu ľudia vidieť alebo počuť ma pri voľbe mimo služby Skype?
• Ďalšia strana: Ako resetovať heslo v hlasovej schránke pre BlackBerry Bold