HTML 이미지맵 좌표잡고 HTML코드 생성하는 방법

보통 배너의 경우 이미지 어느 곳을 클릭해도 동일한 사이트로 연결이 되지만 일부 사이트나 쇼핑몰에는 이미지 중 일부분만 링크가 걸려있고 그것도 url이 각각 다른 것을 볼 수 있을 것입니다. 이미지에 원하는 영역을 설정한 후 링크를 연결해주는 작업을 보통 이미지맵 작업이라고 하는데요. 이런 작업은 전문 개발자가 하거나 혹 포토샵 등의 툴을 이용해야만 하는 것으로 알고 계신분들이 참 많습니다. 만약에 아래 타이틀 썸네일 이미지와 같이 이미지에 GO 버튼이 2개가 들어가 있다면 당연히 특정영역별로 링크를 만들어줘야겠지요?

블로그를 조금 하는 분들이라면 혹 <A>, <FONT>,<IMG SRC>등의 기초태그를 할 줄아는 분들이라면 특별히 HTML에 대한 이해가 없더라도 누구나 이미지 원하는 영역에 링크를 연결할 수 있습니다. 그래서 오늘은 아주 쉽게 이미지맵의 좌표를 잡고 이미지맵HTML코드를 생성하는 방법을 알아보도록 하겠습니다.

이미지맵 생성 사이트

http://www.image-maps.com/

사이트는 회원가입, 프로그램 설치가 필요없습니다. 아래 화면에서 'Browse for File'을 클릭해서 작업할 이미지파일을 불러옵니다.  

이미지가 업로드된 후 'Start Mapping' 버튼을 클릭합니다. 

이미지가 불러와졌습니다. 'Click to continue'를 눌러줍니다. 

이제 화면에는 불러와준 이미지만 있을 것 입니다. 여기서 마우스 오른쪽 버튼을 클릭해줍니다. 만약에 이미지맵 코드만 따야한다면 여기서 알아야 할 메뉴는 'Creat Rect/Poly/Circle' 그리고 'Get Code'뿐입니다. 영어단어를 조금만 아셔도 예상하듯이 RECT(사각형), Poly(다각형), Circle(원형)으로 영역을 잡아주는 기능입니다.

html소스도 복잡해지고 특별히 다각형이나 원형으로 만들필요는 없으니 오늘은 가장 기초가 되는 사각형으로 원하는 영역을 잡아주는 방법만 소개해드리겠습니다. Rect를 선택한 후 원하는 모양을 그려줍니다. 그러면 아래와 같이 메뉴가 노출되는데 여기서 Save버튼을 눌러주면 끝납니다. 만약에 여러개의 이미지맵 즉, 하나의 이미지에서 2개 이상의 영역을 만들고 싶다면 저장을 하고 또 다시 원하는 위치를 잡아주면 됩니다. 물론, Poly, Circle도 쉽게 할 수 있으니 필요한 경우 활용해주시면 됩니다.

아래 이미지는 2개의 클릭영역이 필요하도록 만들어진 이미지입니다. 따라서 사각형 모양으로 2개의 영역을 지정해주면 됩니다.

이제는 해당 좌표랑 html 코드를 따야겠지요? 원하는 영역이 만들어졌으면 이번에는 마우스 오른쪽 버튼을 클릭한 후 'Get Code'버튼을 클릭해줍니다. 

HTML Code 탭에서 아래영역을 보시면 'HTML Image Map Code'가 보일 것 입니다. 이미지까지 웹상에 업로드된 상태이니 아래 코드를 그대로 긁어서 html이 적용되는 사이트 또는 게시판에 붙여넣으면 완성입니다. 만약에 특정 영역 즉, coords의 좌표만 확인하고자 한다면 아래 COORDS의 숫자만 확인해서 활용해주시면 됩니다.

이미지 url만 바꾸고 위 html소스를 그대로 실행해보았습니다. '100%장학금'박스에 마우스를 올리니 원하는 링크로 이동할 수 있는 기능이 생겼습니다. 물론, 우측 '8만원대토익스타트' 역시 마우스를 올리면 다른 팝업툴팁안내와 함께 또 다른 링크로 연결되는 기능이 적용되었습니다.

위에서 생성한 이미지맵 HTML 태그는 사실상 해당 기능을 제공하는 사이트에서 생성한 HTML 코드라서 불필요한 소스들이 많이 포함되어 있습니다. 그 것을 최적화해보니 아래와 같이 심플한 html 코드가 만들어지네요.  첫번째 박스영역을 클릭하면 네이버로 이동되고, 두번째 박스영역을 클릭하면 다음으로 이동되는 소스입니다.

* 이미지를 클릭하면 이동하는 태그

<a href="이미지 클릭시 링크"><img src="이미지주소"></a>

* 이미지의 특정영역을 클릭하면 이동하는 태그

<img src="이미지주소" usemap="#map1">

<map name="map1">

<area shape="rect" coords="1,2,3,4" href="영역 클릭시 링크">

</map>

*도움이 되는 태그

target="_blank" 는 클릭시 새창열기, target="_self"는 현재창에서 링크가 연결됩니다.

title=""는 이미지 또는 영역에 마우스 오버시 보여지는 툴팁 텍스트입니다.  

*area shape 모양 설정 방법

*rect 좌표 4개의 숫자 구성: 가로시작, 세로시작, 가로끝, 세로끝

*circle 좌표 3개의 숫자 구성: 가로중심,세로중심,반지름길이

*poly 좌표는 임의의 숫자 구성: 원하는 모든 좌표들을 순차 나열

위의 예제를 보면 이해가 되시나요? 그냥 이미지에 usemap이라는 코드를 넣고 map html로 연결시켜주는 것 입니다. 만약에 원하는 영역이 한군데라면 <area ~ 는 1개만 있을 것이고 2군데라면 당연히 <area ~ 는 2개가 있을 것 입니다. 코드가 생각보다 꽤나 간단하죠? 필자 역시도 본 사이트는 html태그 전체를 생성할 용도로 활용하진 않고 단순히 coords 좌표를 따는데 주로 사용하고 있답니다. 아래 실전 예까지 포함해드리니 많은 참고되시길 바랍니다. 

실전 예