On, Off 버튼 만들기

 

<span class="btn"><span>
이미지 : 140px(가로) 100px(세로)
.btn{display:inline-block; width:140px; height:50px; } 하면
아래 그림과 같이 배경이미지가 있는 dom 요소가 됨.

////////////// Jquery //////////////
$(function(){

$(".btn").on("click", function(){

var objHeight = $(this).css("background-position-y"); //배경이미지의 y좌표를 가져옴.

if(objHeight != "-50px"){

$(this).css({"background-position-y" : "-50px"});

}else{

$(this).css({"background-position-y" : "0px"});

}

});

});


하면 on, off 버튼을 만들수 있음.


참고사항 ) 이미지를 두개 붙여서 작업하는 이유는
이미지가 처음 로드될때 on, off 이미지를 한번에 불러와서 깜박이는 증상이 없는데
이미지를 두개로 나누어서 작업을 하게 되면
클릭할때 마다 이미지 부분이 깜박임.