웹 사이트를 살펴보면 메뉴 위에
마우스 포인터를 올려 놓으면 메뉴 이미지가 변하는
것을 경험했을 것입니다. 여기서도 DHTML 효과를
이용하여 이미지가 변하는 메뉴를 만들겠습니다.
1) 표를 만듭니다.
(1) 12행 1열의 표를 만듭니다.
(2) [표 등록 정보] 대화상자에서 표의 너비를
[120] 높이를 [450] 픽셀로 설정하고 셀 안쪽 여백과 셀
간격 그리고 테두리 크기를 각각 [0]으로 설정합니다.
(3) 각 셀의 높이를 설정합니다.
행
높이
(단위:픽셀)
행
높이
(단위:픽셀)
1
8
7
40
2
102
8
40
3
10
9
40
4
40
10
40
5
40
11
20
6
40
12
30
2) 작성한 표의 4행부터 메뉴로 사용할 이미지를
삽입합니다.
행
삽입할
이미지
행
삽입할
이미지
4
an.jpg
9
an5.jpg
5
an1.jpg
10
an6.jpg
6
an2.jpg
11
7
an3.jpg
12
e-mail.gif
8
an4.jpg
3) 표에 메뉴로 사용할 이미지 삽입이 끝났으면 각
이미지에 [그림 바꾸기] 효과를 설정하겠습니다. 먼저 4행에
삽입한 이미지(an.jpg)를 마우스로 클릭한 다음 [DHTML 효과
도구 모음]의 [이벤트 선택] 드롭다운 단추를 클릭하여 [마우스를
위에 놓았을 때]를 선택합니다.
4) 다음은 옆에 있는 [효과 선택] 드롭다운 단추를
클릭하여 [그림 바꾸기]를 선택합니다.
5) 다음은 [설정 선택] 드롭다운 단추를 클릭하여 [그림
선택]을 클릭합니다.
6) 그러면 마우스 포인터를 올려 놓았을 때 전환할
이미지를 선택하기 위하여 [그림] 대화상자가
나타납니다. 여기서 전환할 이미지를 선택합니다.(여기서는
전환할 이미지로 an-1.jpg를 선택했습니다.)
7) 3) ~ 6)번 과정을 반복하여 [방명록] 이미지까지 [그림
바꾸기] 설정을 완료합니다. 작업이 완료되었으면 [미리보기]
탭으로 이동하여 변환 설정한 이미지 위에 마우스
포인터를 올려 놓으면 설정 값대로 이미직 변화하는
것을 확인할 수 있습니다.
