'TAB' 태그의 글 목록

Side Tab

JavaScript 2010. 10. 9. 18:10 |

종종 나오는 케이스라서 기록해 놓는다. C&P방법론 적용하여 구현하자.

모양은 아래와 같다.

우측 탭 마우스 오버시 왼쪽 이미지가 변한다.

한 방에 긁어 성공하려면 이미지 이름이 다음과 같이 되어야 한다.

왼쪽 큰 이미지 >> 이미지 이름 끝에 1~n까지의 순번 부여

(gunghap_box2, gunghap_box3, gunghap_box4 ...)

오른 쪽 탭 이미지 >> over이미지일 경우이미지 명이 ov.gif, 아닐경우 or.gif로 끝나게

구현 소스는 다음과 같다.

----------------------------------------------------------------------------------

$("img.imgOv")

.addClass("pointer")

.bind('mouseover', function(){

$("img.imgOv").map(function(){

$(this).attr('src',$(this).attr('src').replace('ov.gif','or.gif'));

});

$(this).attr('src',$(this).attr('src').replace('or.gif','ov.gif'));

var idx = $("img.imgOv").index(this); $("#changeImage").attr('src', '/images/fortune/gunghap_box'+(idx+1)+'.gif'); $("#changeImage").show();

});

Posted by 기계식키보드

PREV 1 NEXT