jQuery를 사용한 기본적인 이미지 롤오버(Rollover) 효과

마우스를 올렸을 때 이미지가 바뀌는 기본적인 JQuery 기반의 이미지 롤오버(Rollover) 효과를 구현하는 방법입니다.

동일한 크기의 이미지 두 개를 준비합니다. 마우스를 올리면 원래 표시되던 이미지가 페이드 아웃(Fade out)되고 다른 이미지가 페이드 인(Fade in)되고, 마우스가 그림 영역을 벗어나면 본래 이미지가 다시 표시되도록 할려고 합니다.

다음과 같은 코드를 원하는 곳에 추가합니다.

<img src="before.jpg" data-alt-src="after.jpg">

before.jpg가 원래 이미지이고 after.jpg는 마우스를 그림 위에 올렸을 때 나타나는 이미지입니다.

그리고 다음과 같은 jQuery 코드를 사용하여 이미지 롤오버 효과를 구현할 수 있습니다.

$(document).ready(function(){

$("img").hover(function() {
var temp = $(this).attr("src");
$(this).attr("src", $(this).attr("data-alt-src"));
$(this).attr("data-alt-src", temp);
});
})
// 출처: jqueryscript.net

stackoverflow 글("Change the image source on rollover using jQuery")도 참고해보세요.

참고:

• 워드프레스(WordPress)에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법