HTML 이미지맵 좌표를 잡고 메뉴를 만드는 방법

홈페이지를 제작 시 메뉴를 만들거나 혹은 이벤트 페이지를 만들 때 등 한 이미지에 링크를 여러 개 거는 HTML 이미지맵 방식이 있습니다. 저도 자주 쓴 방식인데 좌표를 이용하여 링크를 거는데 굳이 하나하나 잘라서 따로 링크를 걸 필요가 없어 편리합니다.

예전만 해도 드림위버와 같은 전문 프로그램으로 일일이 좌표를 알아내 만들곤 했는데 요즘은 이를 쉽게 만들어주는 도구가 있어서 프로그램을 설치 안 해도 되더군요.

HTML 이미지 맵 메뉴 만들기

저의 블로그 메뉴를 직접 캡처하여 좌표가 어떤 식으로 만들어지고 메뉴가 어떻게 만들어지는지 설명해드리고 소스를 자세하게 분석해보도록 하겠습니다.

1) [링크]를 클릭하여 에 접속 후 'Browse for File' 버튼을 눌러 메뉴를 만들 파일을 불러옵니다.

2) 불러왔으면 'Start Mapping' 버튼을 누릅니다. 사실 제가 지금 조금 실수한 게 있는데요. 실제로 실전에 적용 시 웬만하면 파일 이름이 한글이 아닌 영문이어야 합니다.

3) 아래와 같은 화면이 뜨면 'Click to continue' 링크를 누릅니다.

4) 마우스 오른쪽 버튼을 누르면 'Create Rect(사각형), Create Poly(임의 모양), Create Circle(원)' 메뉴가 보이는데 다양한 링크 모양을 선택할 수 있습니다.

5) 저는 '사각형'으로 선택해서 '해당 영역을 지정'했습니다. 여기서 링크 걸 'Map URL' 과 선택사항인 Title, Alt 등을 입력 후 Save 버튼을 누릅니다.

6) 위와 같은 방식으로 똑같이 여러 개를 만들 수 있습니다.

7) 여기서 마무리하고 소스를 추출하기 위해 마우스 오른쪽 버튼을 눌러 'Get Code' 메뉴를 선택합니다.

8) 'HTML Code' 탭의 페이지 맨 하단에 보면 자동으로 생성된 'HTML Image Map Code' 가 보입니다. 이를 복사해서 HTML 소스 코드를 적용해 사용하면 됩니다.

9) 이렇게 복잡한 소스를 구조를 나눠서 정리하면 'img->map(area)' 태그 이런 식으로 구성되어 있습니다.

10) 이미지의 경우 이건 자신의 서버나 게시판에 올려 해당 링크 주소 등으로 변경하면 됩니다. 나머지 area 태그 중 'shape' 의 경우 모양(사각형, 원 모양 등)을 말하며 'coords' 의 경우 이미지의 링크 좌표입니다.

11) title 은 마우스를 오버하면 보이는 팁 텍스트이며 href 의 경우 링크된 주소입니다. 마지막으로 target 은 _self로 지정시 현재 창에서 해당 페이지로 연결되며 _blank로 지정시 새 창으로 연결됩니다.

12) 잘 작동되는지 확인하기 위해 HTML 파일로 저장해서 열어 방명록 메뉴를 선택해보겠습니다.

13) 그럼 아래와 같이 메뉴가 정상적으로 작동되어 방명록 페이지가 열리는 것을 볼 수 있습니다.

약간의 HTML/CSS 지식은 조금이나마 가지고 있어야겠지만 이제 여러분들도 쉽고 빠르게 멋진 홈페이지나 배너 등을 만들 수 있습니다.