마우스오버 버튼 만들기

마우스오버 버튼이란 마우스 커서(cursor)를 올렸을 때 이미지가 변하는 버튼을 말한다. 다른 말로는 롤오버 버튼이라고도 한다.

기본적으로 마우스오버 버튼은 2개의 이미지를 사용한다. 첫번째 이미지는 기본화면일 때  보여지는 이미지이고 두번째 이미지는 마우스를 올렸을 때 보여지는 이미지다.

이렇게 2개의 이미지를 가지고 드림위버의 비헤이비어를 이용하거나 포토샾의 롤오버 기능을 사용하여 마우스오버 버튼을 만드는데 이미지를 만드는 과정보다 마우스오버 기능을 구현하는게 더 어렵다.

그러나 CSS의 background-position속성을 사용하면 하나의 이미지로 마우스오버 버튼을 만들 수가 있다.

하나의 이미지에 기본버튼 부분과 마우스가 오버될 때 보여지게 될 부분을 만든 다음 일반적으로 보여질때는 전체 이미지 높이의 1/2가 보이고 마우스가 오버될 때 "background-position"의 "-" 기능을 이용하여 "- 1/2" 숨겨져 있던 아래 이미지가 출력되는 원리다.

다음 그림을 보면 원리가 간단한을 알 수 있다.

CSS Style은 아래와 같이 구현한다.

a.Overbutton{
  display:block;
  width:이미지의 넓이px;
  height:이미지의 높이 / 2px;
  background:url("이미지의 경로") no-repeat;
}
a:hover.Overbutton{
  background-position:0 -이미지의 높이 1/2px; "-" 잊지않도록 한다.
}
a.Overbutton span{
  display:none;
}

위와 같이 CSS를 구현하고 아래와 같이 CSS의 class를 호출한다.

  <a href="링크주소" class="Overbutton"><span>마우스오버</span></a>

이렇게 두개의 이미지를 사용하지 않고 하나의 이미지를 사용하여 마우스오버 기능을 구현하면 2개의 이미지를 불러올 때 생기는 딜레이가 전혀없게 된다.