라. 이미지 맵을 지정합니다

라. 이미지 맵을 지정합니다

이미지 맵 만들기

이미지 맵 만들기

이미지 맵(Image Map)이란 하나의 그림 안에서 영역을 나누어서 각 영역마다 하이퍼링크를 지정하는 것을 말합니다. 웹 브라우저에서는 이미지 맵에 따라 각각 다른 곳으로 이동할 수 있습니다. 이미지 맵은 수많은 웹 페이지에서 주로 사용하고 있는 기능으로 홈페이지를 멋있게 만들 수 있습니다. 아래에서는 그림 파일을 삽입한 새 문서를 만들어 사용하겠습니다.

그림 삽입하기 [메뉴 이용]

1. 우선 새 문서를 엽니다. [파일 - 새 글]을 실행하면, 새로운 문서 탭이 열립니다.

2. 이미지 맵을 지정할 그림을 삽입합니다. [삽입 - 그림]을 실행하면, [그림] 대화 상자가 나타납니다.

3. □그림 소스□의 □소스□ 입력 창에 삽입할 그림을 입력합니다. [찾아보기] 단추를 이용하면, 파일을 쉽게 찾을 수 있습니다. 여기서는 나모 웹에디터의 샘플 이미지 중에서 하나를 선택하여 입력합니다.

4. 설정을 마치면, [확인] 단추를 누릅니다. 커서 위치에 그림이 나타납니다.

그림 삽입하기 [마우스 이용]

1. 윈도우즈 탐색기나 다른 윈도우를 열어 그림이 있는 폴더로 갑니다.

2. 삽입하고자 하는 그림 파일 위에서 마우스 왼쪽 단추를 누른후 단추를 누른 채로 파일을 웹에디터로 이동시킵니다

3. 웹에디터 위에서 마우스 단추를 놓으면 그림 파일이 삽입됩니다.

이미지 맵 지정하기

이미지 맵 지정하기

1. 이미지 맵을 지정할 그림 파일(k)을 선택합니다. 그림 주변에 8개의 조절점이 나타나며, 동시에 이미지 맵 도구 단추가 도구 막대 설정에 따라서 웹에디터의 하단이나 또는 도구막대에 나타나게 됩니다.

2. [도구 - 이미지 맵]에서 이미지 맵의 영역을 설정할 도구(사각형 도구)를 선택합니다.

3. 설정한 도구(사각형 도구)로 영역(A)을 지정(사각형 영역 설정하기; 쪽)합니다. 영역을 지정함과 동시에 [하이퍼링크 만들기] 대화 상자가 나타납니다.

4. [하이퍼링크 만들기] 대화 상자에서 하이퍼링크(쪽)를 설정합니다.

5. 설정을 마치면, [확인] 단추를 누릅니다. [하이퍼링크 만들기] 대화 상자가 닫히고, 새로운 이미지 맵을 설정할 수 있는 상태가 됩니다.

6. 2 - 5 와 같이, 다른 도구를 선택하거나 기존의 도구를 이용하여 각 부분에 이미지 맵을 설정할 수 있습니다.

이미지 맵 영역 지정하기

이미지 맵 영역 지정하기

이미지 맵에서는 [사각형 그리기], [동그라미 그리기], [다각형 그리기]의 세 가지 도구를 이용하여 하이퍼링크 영역을 지정할 수 있습니다. 단, 각 영역을 설정하기 위해서는 그림을 선택한 상태이어야 합니다.

사각형 영역 설정하기

1. [도구 - 이미지 맵 - 사각형 그리기]를 선택합니다. 마우스 커서가 십자 모양으로 바뀝니다.

2. 영역을 지정할 시작점에서 마우스 왼쪽 단추를 누르고, 이 단추를 누른 채 마우스를 끕니다. 마우스 끌기에 따라 사각형의 크기가 변합니다.

3. 마우스 끌기를 하여 나타난 사각형이 원하는 크기가 되면, 누르고 있던 마우스 왼쪽 단추를 놓습니다. 단추를 놓음과 동시에 [하이퍼링크 만들기] 대화 상자가 나타납니다.

4. [하이퍼링크 만들기] 대화 상자에서 하이퍼링크를 지정합니다. 하이퍼링크 지정은 [하이퍼링크](쪽)를 참고하기 바랍니다.

5. 지정을 마치면, [확인] 단추를 누릅니다.

동그라미 영역 설정하기

1. [도구 - 이미지 맵 - 동그라미 그리기]를 선택합니다. 마우스 커서가 십자 모양으로 바뀝니다.

2. 영역을 지정할 시작점에서 마우스 왼쪽 단추를 누르고, 이 단추를 누른 채 마우스를 끕니다. 마우스 끌기에 따라 동그라미의 크기가 변합니다.

3. 마우스 끌기 하여 나타난 동그라미가 원하는 크기로 되면, 누르고 있던 마우스 왼쪽 단추를 놓습니다. 단추를 놓음과 동시에 [하이퍼링크 만들기] 대화 상자가 나타납니다.

4. [하이퍼링크 만들기] 대화 상자에서 하이퍼링크를 지정합니다. 하이퍼링크 지정은 [하이퍼링크](쪽)를 참고하기 바랍니다.

5. 지정을 마치면, [확인] 단추를 누릅니다.

다각형 영역 설정하기

1. [도구 - 이미지 맵 - 다각형 그리기]를 선택합니다. 마우스 커서가 십자 모양으로 바뀝니다.

2. 다각형 영역은 영역을 지정할 시작점에서 마우스 왼쪽 단추를 누르고, 다음 지점(  )에서 왼쪽 단추를 누릅니다. 계속해서 세 번째, 네 번째 지점에서 왼쪽 단추를 각각 누릅니다. 이렇게 하여 원하는 영역을 포함할 수 있을 때까지 마우스 왼쪽 단추를 이용하여 범위를 지정합니다.

3. 다각형 범위 지정을 마치면, 마우스 왼쪽 단추를 두 번 누르기 합니다. 다각형 모양이 완성되고, [하이퍼링크 만들기] 대화 상자가 나타납니다.

4. [하이퍼링크 만들기] 대화 상자에서 하이퍼링크를 지정합니다. 하이퍼링크 지정은 [하이퍼링크](쪽)를 참고하기 바랍니다.

5. 지정을 마치면, [확인] 단추를 누릅니다.

□아이콘으로 실행

편집 화면 아래쪽에 나타나는 도구 막대에서 각 그리기 아이콘  을 선택하여 영역을 설정할 수 있습니다.

영역 지정 끝내기

영역 지정 끝내기

이미지 맵 지정을 끝내려면, 마우스 포인터를 그림 밖의 영역 위에 놓고 마우스 왼쪽 단추를 누르거나, <Esc> 글쇠를 누르시기 바랍니다.

지정한 영역 지우기

이미지 맵을 지우려고 할 때에는 이미지 맵을 선택한 후에 <Delete> 글쇠를 누르면 지워집니다.

이미지 맵 영역 이동과 영역 크기 변경

지정한 영역을 선택하면, 영역의 크기를 조절하거나 이동할 수 있습니다. 이미지 맵을 지정한 부분을 선택하면, 지정한 영역 주변에 조절점이 나타납니다. 이 조절점을 마우스 끌기로 크기를 변경하거나, 영역을 선택하여 이미지 맵 위치를 이동할 수 있습니다.

마. 문서를 출판합니다

마. 문서를 출판합니다