-
[CSS] 자바스크립트 없이 재빠른 롤오버 버튼 만들기달을파는아이 2008. 4. 27. 15:51
출처 : 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 소스와 이미지만 보고 대충 감잡은 분들도 있을거란 생각이 든다.
원리는 간단하다.
- 한 이미지에 노멀할때랑 롤오버되었을때를 같이 만들어 넣는다. 위 예제처럼 아래위로 붙여 넣는다.
- css에서 overflow:hidden 을 이용해서 height: 30px 만 보이고 나머지는 안보이게 가린다.
- 마우스를 올렸을때 , 즉 롤오버 되었을때 위로 -30px을 이동시킨다. background-position: 0px -30px
- 어차피 height:30px; 만 화면에 보이기 때문에 롤오버된 이미지만 보인다.
어찌보면 눈속임수라고 할수 있다 .
미미하지만 자바스크립트 부하를 줄일수 있고, 미리 이미지가 로딩되어 있기 때문에 보통 롤오버 버튼보단 빠른 반응을 볼수 있다.
작지만 놀라운 아이디어에 박수~
'달을파는아이' 카테고리의 다른 글
자기가 얼마나 살았는지 보여주는 시계 (15) 2008.04.27 김범배의 절대로 안망하는 쇼핑몰 만들기 라는 책. (6) 2008.04.27 개발자는 즐겁고 싶다. 불면증이 없는 밤을 보내고 싶다 (0) 2008.04.27 ajax 팝업의 완결 shdowbox.js (0) 2008.04.27 if(개발자 == 떡뽑는기계){ exit; } (0) 2008.04.27