이미지 로딩이 필요없는 마우스오버 버튼 만들기
마우스오버 버튼이란 마우스 커서(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/trackback/97
-
바람나그네
멋진 강의에는 용의자님 있다~ 짜라란~ 티융~ ^^
넘 멋진 강의 잘 익혀야 겠어요..
행복한 주말 시작되세요 ^^ 화이팅~ -
sogam0
홈페이지 만들때... 메뉴하나 만드는데도 참 고생했던 기억이 떠오르네요.. 예전에 제로보드로 많이 만들었었는데.. 요즘엔 블로그!!!
-
용의자
스킨 갈아입으셨네요
요기 스킨 예쁜거 많죠? 눈여겨 보던거 몇 개 있었는데~
저도 고딩 때 개인 홈페이지 제로보드로 만들어 놓고 방문자 많으면 막 좋아하고 그랬었어요 ㅎㅎ
오히려 그 때는 더 힘든지 모르고 했던 것 같아요
-
-
껍데기
이러한 세세한 방법으로 로딩을 줄이는군요! 저는 그냥 이미지만 바뀌면 된다는 생각에 그냥 적용했는데...이러한 세세한 차이가 있군요~*^^*
-
재팬라멘
정말 많은 걸 배우고 갑니다.
블로그 하려면 배워야 할게 넘 많네요^^
ㅠㅠ 자신감상실도 급상승중......
암튼 자료 고맙습니다.-
용의자
재팬라멘님 반가워요~
무슨 말인가 했는데..
일본라면이군요.
저 번에 일본갔을 때 못 먹었던 라면을 요번에 갔을 때 사먹었는데 맛있었어요 ㅎ
느끼하긴 한데 계속 생각나는 맛?
-
-
-
-
좋은사람들
정말 유용한 팁입니다~
"background-position:0 -버튼의 세로길이px;"
이거 몰라서 사실 플레인스킨 보고 찾아봤었어요~ >.< -
씨디맨
고급팁이네요. 저러면 이미지를 처음에 한방에 다 불러오니 마우스 올렸다고 다시 로딩할 필요가 없으니까요 ㅋ 굿굿 팁요!~
-
느린독자
정말 상큼하고 깔끔한 롤오버!
제 블로그는 이미지가 거의 없어서 타이틀에만 바로 적용을 해봤는데, 좋네요. -
popeye
작은 아이콘의 경우, 10여개를 하나의 이미지로 업로드한 후, 위의 방법으로 코딩하면 참 편리하더군요^^ 좋은 팁을 공개해 주시니 역시 용자님 만세 만세 만만세 !!
-
INDIER
구글도 비슷한 방식으로 한다고 하더라구요..
http://img0.gmodules.com/ig/images/korea/mini_product_icons_04.gif -
-
ColorFilter
안녕하세요~ 용의자님 좋은 스킨과 주옥같은 팁들 정말 감사합니다. 몇 일전에 질문사항이 있어서 리플 남겼는데 어떻게 해결해서 자삭했는데 한가지 질문사항이 더 생겨서 이렇게 리플 남깁니다. 바쁘실텐데 죄송해요..ㅠㅠ
제 블로그에 카테고리 부분을 보면 기본이 접혀 있는 폴더이고 마우스를 폴더가 열리는 형식으로 이미지가 지정되어 있는데요, hover가 적용되는 잠깐의 시간에 로딩시간이 생겨 용의자님이 올리신 팁을 적용해 봤는데 잘 되지 않더라구요. 일단 접힘, 펼침 폴더 이미지를 둘다 붙여서 http://bit.ly/9KHnoR <--요렇게 만들었습니다.
그리고 #category ul li a와 #category ul li a:hover 부분에 가로 세로 px값과 background-position:0 -세로길이px; 이 부분을 추가하여 아래와 같이 수정했습니다.
}
#category ul li a{
display:block;
width:16px;
height:16px;
padding:6px 0 0px 20px;
background:url(./images/folder-horizontal-vert.png) no-repeat 0 7px;
}
#category ul li a:hover{
padding:6px 0 0px 20px;
background-position:0 -16px;
no-repeat 0 7px;
}
위와 같이 수정한게 제가 보기엔 정상인거 같은데 결과물은 이상하게 나옵니다..ㅠㅠ 도저히 해결방법을 몰라 이렇게 조언을 부탁드립니다.
마지막으로 질문 읽어주셔서 감사합니다.. 블로그 스킨 너무 이뻐요 탐난다능;;;-
ColorFilter
앗 아뇨.. 자꾸 이상하게 보여져서 그냥 아래와 같은 기본값인
#category ul li a{
display:block;
padding:6px 0 0px 20px;
background:url(./images/folder-horizontal.png) no-repeat 0 7px;
}
#category ul li a:hover{
padding:6px 0 0px 20px;
background:url(./images/folder-horizontal-open.png) no-repeat 0 7px;
}
이렇게 해 놓았습니다..기본값으로..ㅠ.ㅠ
-
재기
마우스 오버시 하얀색으로 바뀌어서 아무것도 안보이는데
제가 무엇을 잘못한걸까요?
-----------소스-------------------
<head>
<title>시도메뉴</title>
</head>
<style type="text/css">
a.mButton{
display:block;
width:120px;
height:35px;
background:url("../image/menu.jpg" ) no-repeat;
}
a:hover.mButton{
background-position:0 -35px;
}
a.mButton span{
display:none;
}
</style>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<a href="링크주소" class="mButton"><span></span></a>
</td>
</tr>
</table>
</body> -
-
-
용의자
일개미님 반가워요~ :)
아쉽게도 티스토리는 친구 기능은 없네요..^^;
관리자 모드에 링크에 추가를 하시면 쉽게 찾아오실 수 있어요~
-
-
가면라이더
좋은 내용 잘보았습니다
알기 쉽게 풀어주셔서 많은 도움이 되었습니다.
한가지 더 궁금한게 있는데
IE6에서 구현이 가능한가요? -
-
용의자
url은 상대경로를 지정해줘도 된답니다~
style.css에 들어가는 이미지 경로는 style.css 파일의 위치에 맞춰서 상대경로를 넣어주셔야 되요~
-
