이미지 위에 마우스를 올렸을 경우 이미지가 바뀌는 롤오버(Rollover) 효과를 jQuery를 활용하여 나타내는 기본적인 방법입니다.
이미지 영역에 마우스를 올리면 기본 이미지는 페이드 아웃되고 새로운 이미지가 페이드인 되면서 나타나고, 마우스를 이미지 영역 밖으로 옮기면 기본 이미지가 다시 나타나는 효과입니다.
먼저 동일한 사이즈이 이미지를 2개 준비합니다. 기본 이미지로 사용할 것과 마우스 오버 시 새롭게 나타날 이미지 2장입니다.
아래의 코드를 원하는 곳에 추가합니다.
<img src=”before.jpg” data-alt=”after.jpg”>
before에 기본 이미지 파일명을 넣고 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
100% 주문제작형 고퀄리티 워드프레스홈페이지 제작 전문_워프로 : http://wor-pro.com/
