이미지 맵
 

이미지 맵(image map)이란 하나의 그림 안에 영역을 나누어서 각 영역마다 하이퍼링크를 지정하는 것을 말합니다. 따라서 웹 브라우저에서는 그림 위에서 마우스 포인터가 가리키는 지점에 따라 서로 다른 하이퍼링크가 연결되는 것입니다. 기존의 수많은 웹 페이지에서 이미지 맵을 사용한 곳을 쉽게 찾아볼 수 있는 기능이므로, 여기서 잘 익혀 두시기 바랍니다.

사용자께서는 이미지 맵 지정이나 편집을 위하여 다른 어떤 외부 프로그램 없이도 나모 웹 에디터만으로 간편하게 지정하고 편집할 수 있습니다.

먼저 이미지 맵을 지정할 그림 파일을 선택합니다.

그림 파일 위에서 마우스 왼쪽 단추를 한번 누르면, 그림이 선택되면서 그림 테두리에 작은 조절점이 상하좌우 3개씩 나타납니다.

동시에 화면을 보면, 위와 같이 이미지 맵 관련 도구상자가 나타납니다.

이미지 맵 단추를 이용하여 영역을 지정할 때는 다음 세 가지 종류로 하이퍼링크 영역을 지정할 수 있습니다.

※ 참고 : 위의 스포이트 모양의 아이콘을 누르고 이미지의 특정 색을 누르면 그 색이 투명하게 됩니다.

사각형 영역 설정

사각형 그리기 단추를 선택합니다.

직사각형 형태의 하이퍼링크 영역을 설정합니다. 마우스 왼쪽 단추를 그림 위에서 누르는 순간이 사각형의 꼭지점이 시작되고, 마우스 단추를 놓는 순간이 사각형 꼭지점이 끝납니다. 그리고 마우스를 놓는 순간, 방금 지정된 사각형 영역에 대하여 하이퍼링크 만들기 대화 상자가 나타납니다.

동그라미 영역 설정

동그라미 그리기 단추 를 선택합니다.

동그라미 형태의 하이퍼링크 영역을 설정합니다.

마우스 왼쪽 단추를 그림 위에서 누르는 지점이 동그라미의 시작쪽이 되고 마우스 단추를 놓는 지점이 동그라미의 끝쪽이 됩니다. 그리고 마우스를 놓는 순간, 방금 지정된 동그라미 영역에 대하여 하이퍼링크 만들기 대화 상자가 나타납니다.

다각형 영역 설정

다각형 그리기 단추 를 선택합니다.

다각형 형태의 하이퍼링크 영역을 설정합니다.

여러 개의 지점을 잇는 다각형 영역을 지정하기 위하여 그림 위의 시작 지점에서 마우스 왼쪽 단추를 한번 누릅니다. 마우스 포인터가 십자 형태로 변하며 두번째 지점에서 마우스 왼쪽 단추를 누릅니다. 계속해서 마우스 포인터를 이동해 가며 세번째, 네번째 지점을 지정할 수 있습니다. 이렇게 연속해서 여러 개의 꼭지점을 지정한 곳에는 붉은색 실선이 나타나고 이 실선으로 에워싸인 영역이 다각형 영역의 경계선이 되는 것입니다.

영역 지정을 끝내는 방법은 두 가지가 있는데, 일반적인 방법은 마지막 지점을 처음 시작점 위로 겹쳐서 지정하면 영역 지정이 끝나면서 하이퍼링크 만들기 대화 상자가 나타나고, 나모 웹에디터에서 쓰는 두번째 방법은 굳이 시작점 위에 겹쳐서 지정하는 대신 영역 지정을 끝내려는 마지막 지점에서 마우스 왼쪽 단추를 한번이 아닌 두번 누르기를 하면 하이퍼링크 만들기 대화 상자가 나타납니다.

하이퍼링크 대화 상자가 나타나고 URL을 입력합니다.

확인 단추를 눌러 대화 상자를 닫습니다.

▶ 이미지 맵 수정하기

이미지 맵이 지정된 그림 파일 위에 마우스 포인터를 놓고 마우스 왼쪽 단추를 누르면, 그림 파일이 선택되면서 이미지 맵 편집 상태가 되고, 모든 하이퍼링크의 영역이 경계선으로 표시됩니다.

이동시키려는 영역 안으로 마우스포인터를 이동시키면, 마우스 포인터가 손 모양으로 바뀝니다.

이 때 마우스 왼쪽 단추를 누르면, 하이퍼링크 영역의 조절점이 나타납니다.

이 상태에서 마우스 왼쪽 단추를 누른 채로 옮기려는 위치로 마우스를 끌면, 선택된 하이퍼링크 영역 전체가 모양 그대로 마우스를 끄는 곳으로 이동하는 것을 볼 수 있습니다.
 

조절점만을 이동할 때 하이퍼링크 영역 위에서 마우스 왼쪽 단추를 누르면, 하이퍼링크 영역의 조절점이 나타납니다.

이동시키고자 하는 조절점 위로 마우스 포인터를 이동시키면 포인터가 그림과 같이 변합니다.

이동시키고자 하는 조절점 위에서 왼쪽 마우스 단추를 누른 채 마우스 포인터를 이동시킵니다. 조절점도 같이 움직이며 경계선 또한 조절점의 위치 변화에 따라서 변하게 됩니다.