본문 바로가기
▶ Note/○ 유용한 팁

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

by 빨간꿈 2016. 11. 27.


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


이미지맵태그,imagemap,#usemap,html이미지,이미지맵html,마우스오버,reddreams,이미지편집,인터넷,image-map (9)


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



이미지맵 생성 사이트

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



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

이미지맵태그,imagemap,#usemap,html이미지,이미지맵html,마우스오버,reddreams,이미지편집,인터넷,image-map (9)



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

이미지맵태그,imagemap,#usemap,html이미지,이미지맵html,마우스오버,reddreams,이미지편집,인터넷,image-map (9)



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

이미지맵태그,imagemap,#usemap,html이미지,이미지맵html,마우스오버,reddreams,이미지편집,인터넷,image-map (9)



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


이미지맵태그,imagemap,#usemap,html이미지,이미지맵html,마우스오버,reddreams,이미지편집,인터넷,image-map (9)



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


이미지맵태그,imagemap,#usemap,html이미지,이미지맵html,마우스오버,reddreams,이미지편집,인터넷,image-map (9)



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


이미지맵태그,imagemap,#usemap,html이미지,이미지맵html,마우스오버,reddreams,이미지편집,인터넷,image-map (9)



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


이미지맵태그,imagemap,#usemap,html이미지,이미지맵html,마우스오버,reddreams,이미지편집,인터넷,image-map (9)



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


이미지맵태그,imagemap,#usemap,html이미지,이미지맵html,마우스오버,reddreams,이미지편집,인터넷,image-map (9)



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


이미지맵태그,imagemap,#usemap,html이미지,이미지맵html,마우스오버,reddreams,이미지편집,인터넷,image-map (9)



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


이미지맵태그,imagemap,#usemap,html이미지,이미지맵html,마우스오버,reddreams,이미지편집,인터넷,image-map (9)



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

<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 좌표를 따는데 주로 사용하고 있답니다. 아래 실전 예까지 포함해드리니 많은 참고되시길 바랍니다. 



실전 예




반응형


댓글