[롤오버 버튼 추가하는 방법]

 

마우스 커서를 갖다대면 이미지가 바뀌게 하는 작업입니다.

Rollover(롤오버) 이미지를 사용하는 방법을 배워보겠습니다.

 

 

 

<Rollout> 

빨간색 테두리에 마우스 커서가 벗어났을 때 

 

롤아웃 이미지

 


 

<Rollover> 

빨간색 테두리에 마우스 커서를 갖다댔을 때 

 

롤오버 이미지

 


 

 

 

 

 

 

 

<처리방법>

 

 

 

1. 롤오버에 사용할 이미지 두개를 준비합니다.

* 파일명은 'A.jpg', 'A_over.jpg'와 같이 같은 파일명을 사용하되 롤오버시킬 이미지에 '_over'를 붙여줍니다.

 

 

 

롤아웃 이미지

 


 

롤오버 이미지

 


 

[롤아웃 이미지] 

파일명: rollover.jpg 

 

 

[롤오버 이미지] 

파일명: rollover_over.jpg 

 

 

 

 

 

 

2. FTP로 두 이미지를 같은 폴더에 올립니다.

* 폴더 예시: /www/images

 

 

FTP 업로드

 

 

 

 

3. 이미지를 등록할 빈 DIV를 생성합니다.

 

 

이미지를 등록할 DIV 생성

 

 

 

 

4. 새로 생성한 DIV의 D 아이콘을 클릭합니다.

 

 

생성한 DIV의 D 아이콘 클릭

 

 

 

 

5. 항목의 버튼넣기, 버튼/링크넣기를 클릭합니다.

 

 

항목의 버튼넣기 클릭

 

 

 

 

6. 롤아웃 이미지 (rollover.jpg)를 등록한 후, A tag 속성 우측의 'Rollover 버튼'에 체크합니다.

 

 

롤아웃 이미지 (rollover.jpg)를 등록한 후, A tag 속성 우측의 'Rollover 버튼'에 체크

  

 

 

Tip. 이미지에 링크를 걸고자 할 경우.

내부페이지/사용자링크에 작성을 해주시면 됩니다

 

롤오버버튼에 링크걸기