3.28. 버튼 심볼 만들기

제3장 웹 그래픽 기능 익히기

3.29. 버튼 심볼 만들기

마우스를 단추 위에 올리면 모양이 변하는 단추는 '3.18. 단순 롤오버 버튼 만들기'에서 살펴본 바가 있습니다. 여기서는 오버 상태뿐만 아니라 단추를 눌렀을 때와 진행되고 있는 상태 등 4가지 상태를 각각 다르게 표시하는 단추를 만들어 보겠습니다.

앞 강좌의 예제 파일을 이용하겠습니다.

[연습]

1) 핫스팟/슬라이스 숨기기 상태에서 '관심' 메뉴의 배경 사각형을 선택합니다.
F8키를 눌러 심볼로 등록하되 '단추'로 해줍니다.

2) 심볼로 등록된 개체의 경우 왼쪽 아래쪽에 화살표 표시가 나타납니다. 
다시 마우스 오른쪽 단추를 눌러 단축 메뉴를 불러내어서, [심볼 > 심볼 편집]을 선택합니다.

3) [오버]탭을 선택한 후 [업 그래픽 복사]를 선택합니다.
개체에 그라디언트 색상이 들어가 있으므로, 색상 조절 선이 나타날 것입니다.
네모 조절점을 위로 돌려 놓으면 녹색 부분이 위에 나타나게 됩니다.

4) [다운]탭을 선택한 후 [오버 그래픽 복사]를 선택합니다.
이번에서는 네모 조절점을 2시 방향으로 돌려 놓아 봅니다.
 

5) [다운 후 오버]탭을 선택한 후 [다운 그래픽 복사]를 합니다.
이번에는 그라디언트 색상 표를 이용하여 녹색을 주황색으로 바꾸어봅니다.
개체의 선이나 면색 등은 캔버스의 개체를 편집하듯이 도구나 메뉴를 이용하여 편집할 수 있습니다.
[탐색 모음 다운 후 오버 상태 포함]에 체크를 해주면 이 단추를 통해 가본 페이지의 경우 이 단추에 마우스를 가져가면 [오버]의 모양이 아니라, 이 모양으로 표시됩니다.

6) [활성 영역]탭을 선택하여 단추의 반응 영역을 확인합니다.
'활성 영역'이란 마우스의 반응 영역을 의미합니다.

7) [완료] 단추를 누른 후 [핫스팟/슬라이스 보이기]를 한 후에 [관심]영역의 슬라이스를 제거해줍니다. 이유는 단추 심볼로 만들어졌으므로, 슬라이스에 링크를 할 것이 아니고, 단추에 링크를 할 것이기 때문입니다. 슬라이스를 제거하지 않으면 브라우저 상에서 링크가 제대로 되지 않습니다.

[URL 패널]에서 페이지를 연결해줍니다.
[속성] 창을 이용하면 좀더 정밀한 옵션을 줄 수 있습니다.