s

이미지에 커서를 대었을때 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>
|

댓글 3개

유용한 팁이네요~
이렇게 필요한 부분만 쏙 빼서 설명해주니까 이해가 되네요....
왕초보인 저에게도 많은 도움이 되네요... ^^

감사합니다.^^*
댓글을 작성하시려면 로그인이 필요합니다.

팁게시판

6,077건

디자인과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
제목 글쓴이 날짜 조회
13-04-05 조회 4,392
13-04-05 조회 3,953
13-04-02 조회 3,379
13-04-02 조회 4,230
13-04-02 조회 4,603
13-04-02 조회 1,826
13-03-31 조회 2,969
13-03-31 조회 2,952
13-03-31 조회 1,475
13-03-28 조회 1,511
13-03-28 조회 8,692
13-03-28 조회 1,756
13-03-28 조회 3,978
13-03-28 조회 6,555
13-03-28 조회 1,765
13-03-25 조회 1,380
13-03-24 조회 1,529
13-03-24 조회 3,533
13-03-24 조회 1,289
13-03-23 조회 2,038
13-03-23 조회 1,478
13-03-23 조회 1,132
13-03-23 조회 1,647
13-03-22 조회 2,312
13-03-21 조회 1,620