Jak zrobić rozmycie obrazu, gdy kursor nie jest na nim w Tumblr

Możesz utworzyć efekt zdjęcia w motywie Tumblr, który wyświetla obraz wyraźnie, gdy mysz unosi się nad obrazem, ale wtedy, gdy mysz nie unosi się nad obraz, obraz wydaje się zamazany. Najpierw przygotuj obrazy, których użyjesz do uzyskania efektu. Następnie wstaw dwa fragmenty kodu do motywu Tumblr. Zauważ, że kod nie jest obsługiwany w postach Tumblr, tylko w motywach blogów.

Przygotuj obrazy

Aby wykonać zadanie z rozmytym obrazem, będziesz potrzebować dwóch niemal identycznych obrazów : jedna kopia oryginalnego czystego obrazu i druga kopia tego samego obrazu, tylko niewyraźne. Użyj efektu Rozmycie w programie GIMP lub Photoshop, aby utworzyć rozmazany wygląd drugiego zdjęcia. Upewnij się, że obrazy mają dokładnie takie same wymiary.

Kod JavaScript

Fragment kodu JavaScript jest wstawiony między & lt; head & gt; i & lt; /head & gt; tagi twojego bloga Tumblr. Kod JavaScript zawiera zdarzenia MouseRollover i MouseOut. Zdarzenie MouseRollover nakazuje wyświetlanie czystego obrazu, gdy wskaźnik myszy znajdzie się nad obrazem. Zdarzenie MouseOut określa, który obraz ma być wyświetlany, gdy mysz nie unosi się nad obrazem.

Fragment kodu JavaScript, który ma zostać użyty w tym efekcie, to:

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

Zmień odniesienie „Picture1.jpg” na adres URL, aby uzyskać wyraźny oryginalny obraz. Zmień odniesienie „Picture2.jpg” do adresu URL zamazanego obrazu.

Kod HTML

Kod HTML towarzyszący fragmentowi kodu JavaScript określa rozmiar, lokalizację i układ obrazu. Wstaw kod HTML w temacie Tumblr, w którym ma się pojawić wyświetlanie zdjęcia. Kod HTML towarzyszący powyższemu fragmentowi kodu JavaScript to:

& lt; div align = "center" & gt; & lt;! - Tutaj wyświetlany jest obraz .-- & gt; & lt; img src = "Picture2.jpg" border = "0px" width = "500px" height = "500px" onMouseOver = "MouseRollover (this)" onMouseOut = "MouseOut (this)" /& gt; & lt; /div & gt;

Zastąp „Picture2.jpg” adresem URL do niewyraźnego zdjęcia, które będzie wyświetlane domyślnie. Zmień zmienne „szerokość” i „wysokość” na żądany rozmiar renderowanego obrazu.

Zainstaluj kod

Aby zainstalować kod w motywie Tumblr, otwórz swój Panel kontrolny Tumblr, a następnie kliknij kartę „Dostosuj” na pulpicie nawigacyjnym bloga, który chcesz zmodyfikować. Kliknij opcję „Edytuj HTML”, aby otworzyć edytor motywów. Wybierz fragment kodu JavaScript, aby podświetlić kod, a następnie naciśnij „Ctrl-C”, aby skopiować kod. Kliknij spację przed tagiem „& lt; /head & gt;” w kodzie motywu, a następnie naciśnij „Ctrl-V”, aby wkleić kod.

Skopiuj kod HTML, a następnie powróć do edytora motywów Tumblr . Znajdź miejsce w kodzie, w którym chcesz renderować efekt zdjęcia. Kliknij lokalizację, a następnie naciśnij „Ctrl-V”, aby wkleić fragment kodu HTML. Kliknij „Aktualizuj podgląd”, aby przetestować efekt w oknie podglądu. Kliknij „Zapisz”, aby zapisać zmiany.

URL:https://pl.whycomputer.com/oprogramowanie/100318951.html