CSS 만으로 만든 롤오버 이미지
인터넷정보2007. 10. 18. 14:03
<style>
a.rollover img { border-width:0px; display:inline; }
a.rollover img.over { display:none; }
a.rollover:hover { border:0px }
a.rollover:hover img { display:none; }
a.rollover:hover img.over { display:inline; }
</style>
<BODY>
<a href="#test" class="rollover"><img src="http://gony.home.uos.ac.kr/GTO_004.gif"><img src="http://gony.home.uos.ac.kr/GTO_005.gif" class="over"></a>
<a href="#test" class="rollover"><img src="http://gony.home.uos.ac.kr/GTE_019.gif"><img src="http://gony.home.uos.ac.kr/GTO_007.gif" class="over"></a>
</BODY>
a.rollover img { border-width:0px; display:inline; }
a.rollover img.over { display:none; }
a.rollover:hover { border:0px }
a.rollover:hover img { display:none; }
a.rollover:hover img.over { display:inline; }
</style>
<BODY>
<a href="#test" class="rollover"><img src="http://gony.home.uos.ac.kr/GTO_004.gif"><img src="http://gony.home.uos.ac.kr/GTO_005.gif" class="over"></a>
<a href="#test" class="rollover"><img src="http://gony.home.uos.ac.kr/GTE_019.gif"><img src="http://gony.home.uos.ac.kr/GTO_007.gif" class="over"></a>
</BODY>
'인터넷정보' 카테고리의 다른 글
테이블크기 늘리기,줄이기,초기값지정 (0) | 2007.10.18 |
---|---|
인풋 박스 숫자 입력시 툴팁으로 표시 (0) | 2007.10.18 |
숫자만 입력되었는지 체크하기 (0) | 2007.10.18 |
이미지 안쓰고 모서리 둥근 테이블 만들기 2 (0) | 2007.10.18 |
슬라이드 메뉴 (0) | 2007.10.18 |
웹페이지에 삽입된 동영상 및 음악 제어 (0) | 2007.10.18 |
토글 메뉴 (0) | 2007.10.18 |
PNG 그림파일 알파값 살리기 (0) | 2007.10.18 |
텍스트 밑줄 긋기 (0) | 2007.10.18 |
글쓰기폼 늘리기 - 확장, 축소 (0) | 2007.10.18 |