Как да направите размазване на картината, когато курсорът не е включен в Tumblr

Можете да създадете фотоефект в темата на Tumblr, която ясно показва изображение, когато мишката се движи над картината, но след това, когато мишката не се движи над изображението, изображението изглежда замъглено. Първо подгответе изображенията, които ще използвате за ефекта. След това поставете два кодови фрагмента в темата на Tumblr. Обърнете внимание, че кодът не се поддържа в публикациите на Tumblr, само в теми в блога.

Подготовка на изображения

За да постигнете размазана задача с изображения, ще ви трябват две почти еднакви изображения : едно копие на оригиналното ясно изображение и второ копие на едно и също изображение, само замъглено. Използвайте ефекта Blur в GIMP или Photoshop, за да създадете размазан вид на втората снимка. Уверете се, че изображенията са с еднакви размери.

JavaScript код

Откъс & lt; head & gt; и & lt; /head & gt; маркери на блога ви в Tumblr. JavaScript кодът включва събитията MouseRollover и MouseOut. Събитието MouseRollover инструктира ясното изображение да се показва, когато мишката се движи над изображението. Събитието MouseOut определя изображението, което да се показва, когато мишката не се намира над картината.

Фрагментът на JavaScript кода, който ще се използва за този ефект, е:

& lt; script language = "javascript" & gt ; функция MouseRollover (MyImage) {MyImage.src = "Picture1.jpg"; } функция MouseOut (MyImage) {MyImage.src = "Picture2.jpg"; } & lt; /script & gt;

Променете препратката "Picture1.jpg" към URL адреса за ясното оригинално изображение. Променете препратката "Picture2.jpg" към URL адреса за неясното изображение.

HTML код

HTML кодът, който придружава фрагмента на Javascript, определя размера, местоположението и оформление на изображението. Вмъкнете HTML кода в темата на Tumblr, където искате да се показва дисплея на снимката. HTML кодът, който придружава фрагмента на Javascript по-горе, е:

& lt; div align = "center" & gt; & lt;! - Изображението се показва тук .-- & gt; & lt; img src = "Picture2.jpg" border = "0px" width = "500px" height = "500px" onMouseOver = "MouseRollover (this)" onMouseOut = "MouseOut (this)" /& gt; & lt; /div & gt;

Заменете "Picture2.jpg" с URL адреса на неясната снимка, която ще бъде показана по подразбиране. Променете променливите „ширина“ и „височина“ до желания размер на визуализираното изображение.

Инсталирайте кода

За да инсталирате кода в темата на Tumblr, отворете На таблото за управление на Tumblr, след това кликнете върху раздела „Персонализиране“ в таблото за управление на блога, за да го промените. Кликнете върху опцията „Редактиране на HTML“, за да отворите редактора на тема. Изберете кодовия фрагмент на Javascript, за да маркирате кода, след което натиснете „Ctrl-C“, за да копирате кода. Кликнете върху пространството пред маркера „& lt; /head & gt;“ в кода на вашата тема, след което натиснете „Ctrl-V“, за да поставите кода.

Копирайте HTML кода, след което се върнете към редактора на теми на Tumblr , Намерете местоположението в кода, където искате да се визуализира фотоефекта. Кликнете върху местоположението, след което натиснете „Ctrl-V“, за да поставите HTML фрагмента. Щракнете върху "Update Preview", за да тествате ефекта в прозореца Preview. Кликнете върху „Запазване“, за да запишете промените
URL:https://bg.whycomputer.com/soft/100218951.html