Можете да създадете фотоефект във вашата тема на Tumblr, който показва изображението ясно, когато мишката се наведе над картината, но след това, когато мишката не е над мишката, изображението изглежда размазано. Първо подгответе изображенията, които ще използвате за ефекта. След това вмъкнете два кодови фрагмента във вашата тема на Tumblr. Имайте предвид, че кодът не се поддържа в публикации в Tumblr, само в теми на блогове.
Подгответе изображения
За да изпълните задачата за замъглено изображение, ще ви трябват две почти еднакви изображения: едно копие на оригиналното ясно изображение и второ копие на същото изображение, само размазано. Използвайте ефекта Blur в GIMP или Photoshop, за да създадете размазания външен вид на втората снимка. Уверете се, че изображенията са с абсолютно същите размери.
JavaScript код
Изрезка от код на JavaScript се вмъква между
и тагове на вашия блог на Tumblr. JavaScript кодът включва събитията MouseRollover и MouseOut. Събитието MouseRollover инструктира ясното изображение да се покаже, когато мишката се задържи върху изображението. Събитието MouseOut определя кое изображение да се показва, когато мишката не е надвиснала над картината.Кодовият фрагмент на JavaScript, който да се използва за този ефект, е:
Променете препратката „Picture1.jpg“ към URL адреса на изчистеното оригинално изображение. Променете препратката „Picture2.jpg“ към URL адреса на размазаното изображение.
HTML код
HTML кодът, придружаващ фрагмента на Javascript, определя размера, местоположението и оформлението на изображението. Поставете HTML кода в темата на Tumblr, където искате да се покаже показването на снимки. HTML кодът, придружаващ фрагмента на Javascript по-горе, е:
Заменете “Picture2.jpg” с URL адреса на размазаната снимка, която ще се показва по подразбиране. Променете променливите “width” и “height” до желания размер на вашето изобразено изображение.
Инсталирайте кода
За да инсталирате кода във вашата тема на Tumblr, отворете таблото си за управление на Tumblr, след което щракнете върху раздела „Персонализиране“ в таблото, за да го промените в блога. Щракнете върху опцията „Редактиране на HTML“, за да отворите редактора на теми. Изберете кодовия фрагмент на Javascript, за да маркирате кода, след което натиснете „Ctrl-C“, за да копирате кода. Щракнете върху пространството пред „Таг в кода на вашата тема, след което натиснете „Ctrl-V“, за да поставите кода.
Копирайте HTML кода, след което се върнете в редактора на теми на Tumblr. Намерете местоположението в кода, където искате да се покаже фотоефектът. Щракнете върху местоположението, след това натиснете „Ctrl-V“, за да поставите HTML фрагмента. Щракнете върху „Update Preview“, за да тествате ефекта в прозореца Preview. Щракнете върху „Запазване“, за да запазите промените.
