3.18. 롤 오버(Roll Over) 버튼 만들기

제3장 웹 그래픽 기능 익히기 > 3.18. 롤 오버(Roll Over) 버튼 만들기(1)

3.18.1. 롤 오버의 이해

자바스크립트를 이용한 롤오버는 브라우저 상에서 마우스를 그림 위에 가져가거나 클릭을 하면 그림이 변하는 버튼을 기리킵니다. 
파이어웍스에서는 그림 쪼개기(슬라이스) 기능을 프레임과 연동시키면 쉽게 구현할 수 있습니다.

3.18.2. 단순 롤 오버 버튼 만들기

1) 보통 때 보일 버튼을 만듭니다.





2) 마우스가 그림 위에 있을 때, 즉 롤 오버를 위한 프레임을 추가합니다.
추가 프레임은 프레임 패널의 메뉴에서 '프레임 추가' 혹은 '프레임 복제'를 통해 만들 수 있습니다.





[프레임 복제]를 실행한 후 '개수'는 '1', '현재 프레임 이후'로 설정하고 [확인] 단추를 누릅니다.
 

3) 두 번째 프레임에 롤오버의 상태에 따른 그림을 그리거나 수정합니다.




위의 경우는 복제된 그림에 색상과 효과를 수정하였습니다.

4) 슬라이스 도구를 이용하여 롤오버될 부분을 쪼갭니다. 




이 때 2개의 프레임 모두, 롤오버될 단추가 쪼갠 영역 안에 있어야 합니다.
개체의 크기가 다르다면 핫스팟 도구를 이용하여 마우스 반응 영역을 넓혀줍니다.

5) 마우스로 슬라이스 영역의 가운데 있는 시계 모양의 단추를 누릅니다.
메뉴 중에서 '단순 롤오버 비헤이비어 추가'를 지정해줍니다.
 

6) [URL] 패널에서 링크를 해줍니다.
 

7) 그림을 [최적화]합니다.
 

8) 파일 [내보내기]를 합니다.
그러면 자바 스크립트 소스가 포함된 HTML 파일을 생성합니다.