이미지맵 만들기 어떤 이미지의 특정한 부분에 링크를 걸어서 클릭했을 때 지정한 곳으로 이동하게 하는 게 이미지맵 인데요. 그림 위의 좌표를 알아내서 그 부분에 링크를 걸어주면 클릭했을 때 지정한 웹 페이지 등으로 이동하게 됩니다. 이런 이미지맵 만드는 과정을 살펴볼게요.
■ 이런 그림을 준비해서 이미지에서 표시한 텍스트 부분 박스를 클릭하면 해당 사이트로 이동하도록 만들어보겠습니다. 먼저 저 부분의 좌표를 알아야 위치를 잡아줄 수 있는데요. 좌표를 알아내는 방법은 윈도우의 그림판을 이용해도 간단하게 알아낼 수 있습니다. 윈도우의 그림판을 실행해서 준비한 이미지를 불러오겠습니다.
■ 윈도우 그림판에서 이미지를 열어놓은 상태인데요. 이 상태에서 빨간 박스 부분의 좌표를 알아볼 텐데요. 이미지의 좌표는 왼쪽 위 모서리(시작)와 오른쪽 아래(끝) 모서리의 좌표만 알면 됩니다. 마우스를 그 부분으로 가져가면 아래쪽에 좌표가 표시됩니다.
■ 왼쪽 위 모서리의 좌표는 [616, 33]이네요. 이렇게 마우스를 올려보면 아래에 좌표값이 보입니다. 다음은 오른쪽 아래 모서리의 값을 찾아보겠습니다.
■ 오른쪽 아래는 [867, 109]입니다. 이렇게 구한 좌표값을 html 소스에 넣어주면 되거든요. 그럼 본격적으로 이 이미지를 본문에 넣어서 저 위치에 링크를 걸어보겠습니다.
■ 준비한 그림을 [map.png] 로 저장했는데요. 그림을 본문에 넣었습니다.
■ 이렇게 그림 한 장만 들어간 상태입니다. 그럼 알아낸 좌표를 이용해서 링크를 걸어보겠습니다.
■ <map>태그를 만들고 name="aaa"라는 이름을 설정했습니다. 이 이름을 <image> 태그에서 [usemap="#aaa"] 형식으로 사용할 맵으로 지정해주고, <area>태그를 입력하고 그 안에 좌표를 넣어주면 되는데요. [shape="rect"] 좌표를 지정할 영역의 형태가 사각형이라는 의미이고, [coords]는 위에서 알아낸 좌표들을 순서대로 넣었습니다. [href]는 이동할 웹 페이지 주소이고, [target="_blank"]를 입력해서 이동할 웹 페이지를 새 창에서 열도록 설정한 상태입니다. 브라우저에서 확인해보겠습니다.
■ 캡처하면 마우스가 안 보여서 동영상으로 찍었는데요. 설정한 좌표값으로 이동하면 마우스 모양이 바뀌는 걸 확인할 수 있을 겁니다. 클릭하게 되면 당연히 지정한 웹 페이지도 이동하게 됩니다. 이런 이미지맵은 똑같은 방법으로 하나의 그림에 여러 개의 링크를 걸 수 있습니다. 간단한 내용이니 직접 해보세요. 수고하셨습니다.^^
