이미지 처리 기법-롤오버 효과(hover)
- 퍼블리셔/css
- 2011. 2. 21. 06:00
조각난 이미지를 병합된 하나의 이미지로 만드는것이 Image Sprite라고 했습니다.
마찬가지로 hover 효과를 다른 이미지가 필요한데요. 이것도 같이 병합해서 하나의 이미지 안에 넣고 사용하는겁니다.
전에 이야기한 타이틀 부분에 대해서 이야기 하겠습니다.
이전글을 안보신분은 보시고 이걸 보시면 더욱 좋습니다. 같은 예제를 사용합니다. =>http://demun.tistory.com/1896
너비가 730이고 높이가 100 인 이미지가 있다고 가정합니다.
우선 html 코드부터 보시죠.
<div id="title">
<h1><a href="[#\#_blog_link_##]" title="[#\#_title_##]"><span>[#\#_title_##]</span></a></h1>
</div>
#title h1 a{
width:730px;
height:100px;
background:url(images/button.png) no-repeat 0 0;
display:block;
margin-top:20px;
}
#title h1 span{
text-indent:-9999px;
}
제가 적용한 이미지를 한번 보세요.
위에서 800px 내려온것이 평상시에 보여지는 #title h1 a 에 해당합니다.
그럼 hover 에 보여지는 부분은 100px 더 내려온 900px 가 되어야 합니다.
그래서 hover 마우스가 올라갔을때는 아래처럼 설정합니다.
#title h1 a:hover{
background-position:0 -900px;
}
이걸로 hover 효과내는것은 끝입니다.
이미지에 보시면 다른 이미지들도 보일겁니다. 모두 두개의 이미지를 만들어놓고 평상시 보여지는 이미지와 , 마우스가 올라갔을때의 이미지를 만들어놓고 background-position 으로 자리값만 변경해주시면 되는것입니다.