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가 써먹을 데가 많은 것 같지 않나요?
