CSS활용 이미지 롤오버 버튼 만들기

물론 자바스크립트를 이용해서도 가능하지만, 스타일시트만으로 구현이 가능합니다.

<style type="text/css">

img { border:none; }

div#tabB a img.over { display:none; }

div#tabB a:hover { position:relative; }

div#tabB a:hover img { display:none; }

div#tabB a:hover img.over { display:inline; }

div#tabB a img { vertical-align:top; }

</style>

사용방법)

<div id="tabB">

<a href="#"><img src="http://sstatic.naver.com/search/images10/btn_sbx_book.gif" />

<img src="http://sstatic.naver.com/search/images10/btn_sbx_book01.gif" class="over" /></a>

</div>