Tumblr 테마에서 마우스를 사진 위로 가져 가면 이미지가 선명하게 표시되는 사진 효과를 만들 수 있지만 마우스가 이미지 위에 있지 않으면 이미지가 흐릿하게 보입니다. 먼저 효과에 사용할 이미지를 준비하십시오. 그런 다음 Tumblr 테마에 두 개의 코드 조각을 삽입합니다. 코드는 Tumblr 게시물에서 지원되지 않으며 블로그 테마에서만 지원됩니다.
이미지 준비
흐릿한 이미지 작업을 수행하려면 거의 동일한 두 개의 이미지가 필요합니다. 하나는 원본의 선명한 이미지이고 다른 하나는 동일한 이미지의 두 번째 복사본입니다. 김프 또는 포토샵에서 흐림 효과를 사용하여 두 번째 사진의 흐릿한 모양을 만듭니다. 이미지가 정확히 동일한 치수인지 확인하십시오.
자바 스크립트 코드
자바 스크립트 코드 스 니펫이
과 Tumblr 블로그의 태그. JavaScript 코드에는 MouseRollover 및 MouseOut 이벤트가 포함됩니다. MouseRollover 이벤트는 마우스를 이미지 위로 가져갈 때 선명한 이미지를 표시하도록 지시합니다. MouseOut 이벤트는 마우스가 그림 위에 있지 않을 때 표시 할 이미지를 정의합니다.이 효과에 사용할 JavaScript 코드 조각은 다음과 같습니다.
"Picture1.jpg"참조를 선명한 원본 이미지의 URL로 변경합니다. "Picture2.jpg"참조를 흐릿한 이미지의 URL로 변경합니다.
HTML 코드
자바 스크립트 스 니펫과 함께 제공되는 HTML 코드는 이미지의 크기, 위치 및 레이아웃을 정의합니다. 사진 표시를 표시 할 Tumblr 테마에 HTML 코드를 삽입합니다. 위의 자바 스크립트 스 니펫과 함께 제공되는 HTML 코드는 다음과 같습니다.
"Picture2.jpg"를 흐리게 표시되는 사진의 URL로 바꾸면 기본적으로 표시됩니다. "너비"및 "높이"변수를 렌더링 된 이미지의 원하는 크기로 변경합니다.
코드 설치
Tumblr 테마에 코드를 설치하려면 Tumblr 대시 보드를 연 다음 대시 보드에서 "사용자 지정"탭을 클릭하여 블로그를 수정할 수 있습니다. 테마 편집기를 열려면 "HTML 편집"옵션을 클릭하십시오. 자바 스크립트 코드 조각을 선택하여 코드를 강조 표시 한 다음 "Ctrl-C"를 눌러 코드를 복사합니다. “”태그를 입력 한 다음“Ctrl-V”를 눌러 코드를 붙여 넣습니다.
HTML 코드를 복사 한 다음 Tumblr 테마 편집기로 돌아갑니다. 코드에서 사진 효과를 렌더링 할 위치를 찾습니다. 위치를 클릭 한 다음 "Ctrl-V"를 눌러 HTML 스 니펫을 붙여 넣으십시오. 미리보기 창에서 효과를 테스트하려면 "미리보기 업데이트"를 클릭하십시오. "저장"을 클릭하여 변경 사항을 저장합니다.
