스타일 시트로 롤오버 구현 코딩
로빈아빠
본문
<a class="favorBtn" title="관심블로그로 등록!" href="#" onclick="addBlogrollPopup('1892'); return false;">관심블로그로 등록!</a>
<a class="rssBtn" title="RSS 피드 구독!" href="virhca.com">RSS 피드 구독!</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>
#menu a { display:block; width:15px; height:15px; text-indent:-9999px; }
/* A 태그를 15x15의 크기로 만들고, A 태그의 텍스트를 보이지 않게 합니다. */
<a class="rssBtn" title="RSS 피드 구독!" href="virhca.com">RSS 피드 구독!</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>
#menu a { display:block; width:15px; height:15px; text-indent:-9999px; }
/* A 태그를 15x15의 크기로 만들고, A 태그의 텍스트를 보이지 않게 합니다. */
관련링크
댓글목록
등록된 댓글이 없습니다.