이미지에 커서를 대었을때 rollover와 rollout 효과주는 방법
롤오버 이미지 적용은 간단하게 아래 스타일시트를 이용하면 편리합니다.
방법은 아래와 같이, webftp를 통해 기본이미지와 롤오버이미지를 업로드 한 다음 해당 경로를 넣어주면 됩니다.
아래 소스를 원하는 페이지의 원하는 공간에 넣어 적용해보시기 바랍니다.
<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>
<a href="#" class="rollover"><img src="기본이미지" border="0" align="absmiddle"><img src="롤오버이미지" border="0" class="over"></a>
방법은 아래와 같이, webftp를 통해 기본이미지와 롤오버이미지를 업로드 한 다음 해당 경로를 넣어주면 됩니다.
아래 소스를 원하는 페이지의 원하는 공간에 넣어 적용해보시기 바랍니다.
<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>
<a href="#" class="rollover"><img src="기본이미지" border="0" align="absmiddle"><img src="롤오버이미지" border="0" class="over"></a>
댓글 3개
12년 전
유용한 팁이네요~
senseme
12년 전
감사합니다.^^
12년 전
이렇게 필요한 부분만 쏙 빼서 설명해주니까 이해가 되네요....
왕초보인 저에게도 많은 도움이 되네요... ^^
감사합니다.^^*
왕초보인 저에게도 많은 도움이 되네요... ^^
감사합니다.^^*
게시글 목록
| 번호 | 제목 |
|---|---|
| 20636 | |
| 20632 | |
| 20627 | |
| 11160 |
jQuery
참 좋은 이미지 슬라이딩 라이브러리
6
|
| 20626 | |
| 20625 | |
| 20619 | |
| 17684 |
계약서
홈페이지 제작 계약서
8
|
| 20182 | |
| 11154 |
Mobile
모바일로 접속했는지 확인하기.,
5
|
| 11151 | |
| 11143 |
MySQL
트리거 사용법에 관하여..
7
|
| 20607 | |
| 20601 | |
| 11131 | |
| 11124 | |
| 11121 | |
| 11118 | |
| 11113 |
PHP
페이스 댓글, 좋아요 달기
4
|
| 11109 |
JavaScript
페이스북 댓글창 좋아요 달기
3
|
| 20587 | |
| 11102 |
PHP
문자열 자르기 입니다.
6
|
| 11098 |
PHP
정규식에 관한 내용입니다.
3
|
| 11092 |
PHP
우분투서버 셋팅버입니다
5
|
| 11086 |
PHP
js, php 배열 연결
5
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기