마우스오버 버튼이란 마우스 커서(cursor)를 올렸을 때 이미지가 변하는 버튼을 말합니다. 제 블로그 오른쪽 상단에 있는 RSS구독 버튼이 마우스오버 버튼이라고 할 수 있습니다. 어두운 글씨로 '구독하기'라고 적혀 있는 것이 마우스를 가져가면 밝게 변합니다. 특별한 효과를 준것은 아니고 어두운 글씨가 써져있는 이미지와 밝은 글씨가 써져있는 이미지 2개를 이용한 버튼입니다. 기본적으로 마우스오버 버튼은 2개의 이미지를 사용합니다. 첫번째 이미지는 기본화면일 때 보여지는 이미지이고 두번째 이미지는 마우스를 올렸을 때 보여지는 이미지입니다. 이렇게 두 개의 이미지를 사용했을 때 발생하는 문제는 마우스를 올려서 두번째 이미지(button_over.gif)가 로딩이 되는 시간 때문에 약간의 시간차가 생긴다는 것입니다. CSS의 background-position속성을 사용하면 이미지 1개만 사용하여 마우스오버 버튼을 만들 수가 있는데, 1개의 이미지를 최초에 로딩하여 마우스오버 시에 이미지 로딩 시간 없이 바로 이미지가 보일 수 있게 합니다.
CSS를 이용해 마우스오버 버튼 만들기먼저 CSS를 이용해 마우스오버 버튼을 만드는 방법을 알아보도록 합시다. HTML<a href="링크주소" class="mButton"><span>마우스오버버튼</span></a> html문서에 링크를 하나 만들어 주고 class명을 넣어 줍니다. 저는 class명을 mButton으로 설정하였습니다. CSSa.mButton{
display:block;
width:버튼의 가로길이px;
height:버튼의 세로길이px;
background:url(기본 버튼 이미지 경로) no-repeat;
}
a:hover.mButton{
background:url(마우스오버 때 보여질 이미지 경로) no-repeat;
}
a.mButton span{
display:none;
}:hover는 마우스를 올렸을 때 보여지는 스타일 입니다. 기본적인 스타일은 그대로 물려받기 때문에 마우스를 올렸을 때 변하는 속성(위 소스에서는 background)만 변경해 주면 됩니다. 위 소스는 CSS를 사용한 마우스오버 버튼을 만드는 방법이지만 2개의 이미지를 사용한 것입니다. 이미지 로딩을 없애기 위해 1개의 이미지를 사용하여 마우스오버 버튼을 만든다고 하였는데, 1개의 이미지로 마우스오버 버튼을 만들기 위해 사용하는 것이 background-position속성입니다. background-position속성은 배경 이미지의 시작 위치를 지정하는 속성으로 아래 그림을 보시면 이해가 빠르실 거라고 생각됩니다.  background-position의 기본값은 0, 0입니다.
이해가 빠르신 분이라면 위 그림만 보고도 어떻게 버튼을 만들지 살짝 짐작이 가셨을 겁니다. 버튼을 만들기 위해 아래와 같이 2개의 이미지를 붙여 놓은 듯한 1개의 이미지를 사용할 것입니다.  CSS 마우스오버 버튼에서는 두개의 버튼 이미지가 붙어 있는 1개의 이미지를 사용합니다.
 이미지를 만들 때 주의해야 할 사항입니다.
 이미지를 만들 때 주의해야 할 사항입니다.(2)
이미지가 만들어졌으면 버튼을 만들어 봅시다. html문서는 위와 같습니다. CSS문서를 봅시다. CSSa.mButton{
display:block;
width:버튼의 가로길이px;
height:버튼의 세로길이px;
background:url(기본 버튼 이미지 경로) no-repeat;
}
a:hover.mButton{
background-position:0 -버튼의 세로길이px;
}
a.mButton span{
display:none;
}a:hover.mButton의 스타일에 나오는 버튼의 세로길이px은 이미지의 세로 길이가 아닌 화면에서 보여지게 될 버튼의 세로길이입니다. 위에 버튼 이미지를 만들 때 주의해야 할 사항을 설명한 그림을 보시면 잘 이해되시리라 생각됩니다. (앞에 -도 잊지 말고 꼭 붙여줍니다~)  이해를 돕기 위한 그림입니다. 마우스오버 시에는 배경으로 들어간 버튼 그림이 마우스오버 이미지 시작점 부터 보여지게 됩니다.
눈으로 보는 것 보다 한 번 만들어 보는 것이 이해가 빠릅니다. 궁금한 것이 있다면 댓글로 질문해 주세요~ :D
http://yongja.tistory.com/97 | 
