[CSS] CSS만으로 이미지 롤오버 버튼 구현하기
코덕질/해탈내역들 2009/05/18 01:14
보통 많은 사이트에서 이미지 롤오버를 할때, 자바스크립트를 많이 씁니다. 그런 방식이 틀리다는 소리는 아닙니다. 다만, 자바스크립트를 이용할 때는 이런 단점이 있습니다 :
왠지 치사하게 이것저것 잡아놓은 느낌이 들지만 (..), 개인적으로는 이 방식이 더 좋다고 생각합니다. 블로그 상단 오른쪽의 2개[RSS/관심블로그] 버튼도 이와 같은 방식으로 구현했고요.
이 버튼을 똑같이 구현해 보도록 하겠습니다. 여기서는 드림위버 CS3을 이용하여서 구현해 보았습니다.
먼저 HTML에 위와 같은 코드를 입력해 주세요.
지금까지는 그냥 <a>~</a>태그에 불과합니다.
이제 스타일을 입혀보겠습니다.
여기서 중요한 속성을 입력합니다. <head>~</head> 사이에 위와 같은 CSS 스타일 코드를 입력해 주세요.
그런데 중요한 속성을 입력했는데, 작동하질 않습니다. 중요한 속성 하나가 빠졌기 때문입니다.
원래 이 태그는 image 태그가 아닌 a 태그이기 때문에 image역할을 할 수 있도록 "공간 설정"을 해줘야 돼겠지요.
중요한 속성을 하나 더 입력합시다. <style>의 앞쪽에 입력하시면 됩니다.
이제 멀쩡하게 순수 CSS만으로 구현된 "image 태그 없는" 이미지 롤오버 버튼이 완성되었습니다 ^^. 생각보다 CSS가 써먹을 데가 많은 것 같지 않나요?
1. 비 자바스크립트 지원 브라우저에서 이미지 롤오버 효과 작동 불가 [그런 경우는 드물겠지만]
2. 롤오버시 이미지가 바로바로 뜨지 않고 로딩 후에 뜨는 현상
3. 롤오버 했을때와 롤오버 하기 전 이미지를 따로따로 만들어야 한다
4. HTML 소스를 직접 건드려야 하기 때문에, 소스코드가 더러워지고 불편해진다.
2. 롤오버시 이미지가 바로바로 뜨지 않고 로딩 후에 뜨는 현상
3. 롤오버 했을때와 롤오버 하기 전 이미지를 따로따로 만들어야 한다
4. HTML 소스를 직접 건드려야 하기 때문에, 소스코드가 더러워지고 불편해진다.
왠지 치사하게 이것저것 잡아놓은 느낌이 들지만 (..), 개인적으로는 이 방식이 더 좋다고 생각합니다. 블로그 상단 오른쪽의 2개[RSS/관심블로그] 버튼도 이와 같은 방식으로 구현했고요.
이 버튼을 똑같이 구현해 보도록 하겠습니다. 여기서는 드림위버 CS3을 이용하여서 구현해 보았습니다.
롤오버 원본 이미지는 다음과 같습니다.
이 이미지 하나만으로 2개의 버튼에 대해서 롤오버를 적용시켜 보겠습니다.
자, 시작합니다 ~
자, 시작합니다 ~
<a class="favorBtn" title="관심블로그로 등록!" href="#" onclick="addBlogrollPopup('1892'); return false;">관심블로그로 등록!</a>
<a class="rssBtn" title="RSS 피드 구독!" href="kuna.wo.tc">RSS 피드 구독!</a>지금까지는 그냥 <a>~</a>태그에 불과합니다.
이제 스타일을 입혀보겠습니다.
<style type="text/css">
#menu .rssBtn {background: transparent url(./img/menu_info.gif) no-repeat 0px -15px;}
/* menu_info.gif를 -15px만큼 위로 올립니다 >> 롤오버하지 않은 RSS 이미지가 나타남 */
#menu .rssBtn:hover {background: transparent url(./img/menu_info.gif) no-repeat -15px -15px;}
/* 롤오버시 menu_info.gif를 왼쪽으로 -15px만큼 옮기고 -15px만큼 위로 올립니다 >> 롤오버한 RSS 이미지가 나타남 */
#menu .favorBtn {background: transparent url(./img/menu_info.gif) no-repeat 0px 0px;}
/* menu_info.gif를 그대로 보여줍니다 >> 롤오버하지 않은 관심블로그등록 이미지가 나타남 */
#menu .favorBtn:hover {background: transparent url(./img/menu_info.gif) no-repeat -15px 0px;}
/* menu_info.gif를 왼쪽으로 -15px 옮겨 보여줍니다 >> 롤오버한 관심블로그등록 이미지가 나타남 */
</style>
그런데 중요한 속성을 입력했는데, 작동하질 않습니다. 중요한 속성 하나가 빠졌기 때문입니다.
원래 이 태그는 image 태그가 아닌 a 태그이기 때문에 image역할을 할 수 있도록 "공간 설정"을 해줘야 돼겠지요.
#menu a { display:block; width:15px; height:15px; text-indent:-9999px; }
/* A 태그를 15x15의 크기로 만들고, A 태그의 텍스트를 보이지 않게 합니다. */이게 끝입니다. 쉽게 말해서, 배경 이미지를 설정하고, 그 배경 이미지를 움직이면서 롤오버 효과가 나는 것 처럼 보이게 하는 것입니다. [뭐 결국은 롤오버 효과지만]
예제.rar이제 멀쩡하게 순수 CSS만으로 구현된 "image 태그 없는" 이미지 롤오버 버튼이 완성되었습니다 ^^. 생각보다 CSS가 써먹을 데가 많은 것 같지 않나요?
댓글을 달아 주세요
예전에 자바로 쓰던건데
CSS로도 쓸수가 있군용
좋은 팁이군요 감사합니다~:)
전 버튼을 사용해서 자바 쓰지 않고 css로 롤오버시키는데, 어느 답답한 브라우저에서는 조금 버벅대더군요. 눈을 깜박거리는 버퍼링 발생;;; 저도 이 방법을 써볼까 생각해봐야겠어요.
고급 팁 캄솨!!!
CSS가 기능이 강화되면서 예전에는 JS를 써야 하는 것을 CSS로도 쉽게 구현이 가능해졌죠.
CSS로 갈 수 있다면 이쪽이 더 편하죠.
좋은 팁 감사해요~ ^^
요고 은근히 편하던걸요.. 저야 이미지는 잘 안쓰는 편(?)이라 언제나 한번 쓸 수 있을지..
CSS쪽은 건드릴 생각도 못하고 있다죠...;;
으음 css로 롤오버도 되는군요+_+
저 좀 css좀 배워놔야 할텐데요ㅠ;
CSS만 제대로 활용해도 정말 할 수 있는것이 많지요.
제 블로그 상단의 카테고리맵도 오직 hover만을 이용해 만들었답니다 :)
우와;;
흐음..그렇군요.ㅇㅅㅇ
비밀댓글입니다
삽질은 위대했다
근데 생각해보니까... CSS는 되는데 JS가 안되는게 있으려나?!
보통 CSS가 JS에 포함된다죠 ^^
이거를 응용해서
이미지 롤오버가 아니라
그냥 텍스트에다가 롤오버를 따로따고 해보고 싶은데요..
좀 더 설명해주실 수 없으신가요ㅠㅠ?
혼자 하려고 했더니 잘 모르겠어서ㅠㅠㅠㅠ