[CSS] 자바스크립트 없이 재빠른 롤오버 버튼 만들기

 

출처 : How to make Buttons with Hover Load Faster

자바스크립트를 이용하지 않고 단지 css만을 이용해서 롤오버를 만드는 방법이다.

예제 css :
.nav a:link, .nav a:visited {
width: 160px ; height: 30px ; display: block; overflow:hidden;
background: url(’images/nav1.gif’) 0px 0px no-repeat;
}
.nav a:hover, .nav a:active{
background-position: 0px -30px;
}

css 소스와 이미지만 보고 대충 감잡은 분들도 있을거란 생각이 든다.

원리는 간단하다.

 

1. 한 이미지에 노멀할때랑 롤오버되었을때를 같이 만들어 넣는다. 위 예제처럼 아래위로 붙여 넣는다.
2. css에서  overflow:hidden 을 이용해서 height: 30px 만 보이고 나머지는 안보이게 가린다.
3. 마우스를 올렸을때 , 즉 롤오버 되었을때 위로 -30px을 이동시킨다. background-position: 0px -30px
4. 어차피 height:30px; 만 화면에 보이기 때문에 롤오버된 이미지만 보인다.

 

어찌보면 눈속임수라고 할수 있다 .

미미하지만 자바스크립트 부하를 줄일수 있고, 미리 이미지가 로딩되어 있기 때문에 보통 롤오버 버튼보단 빠른 반응을 볼수 있다.

작지만 놀라운 아이디어에 박수~