H : T : M : G : A : W

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

Posted at 2016.11.27 04:09 | Posted in ▶ 유용한 블로그/사소한강좌


보통 배너의 경우 이미지 어느 곳을 클릭해도 동일한 사이트로 연결이 되지만 일부 사이트나 쇼핑몰에는 이미지 중 일부분만 링크가 걸려있고 그것도 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 좌표를 따는데 주로 사용하고 있답니다. 아래 실전 예까지 포함해드리니 많은 참고되시길 바랍니다. 



실전 예




  • Blog Comment(13)
  • SNS Comment
  • Trackback(0)

티스토리 댓글


  1. 이미지맵을 활용할때 드림위버를 사용했었는데 굳이 이젠 프로그램 설치가 필요 없어졌군요.
    좋은 정보 너무나 감사드립니다.^^
  2. 멋진그녀
    끝내줘요....정말 멋지십니다....^^* 최고~~
  3. 푸레이크
    이밎 업로드후 우클릭이 그냥 그림저장하는 평소메뉴대로 나오는데 MAC에서만 되나여?ㅠㅠ
  4. 네이버카페에서 글쓰기했는데 버튼 저고대로해서 저사이트에서 복사붙여넣기했는데
    왜 적용이안될까요 ㅠㅠㅠㅠㅠㅠㅠ
  5. 궁금
    위 이미지맵 사이트에서 html 이미지주소 만들어서 해보니 웹페이지에 정상적으로 확인이 되는데 혹시 머 열람할때마다 비용이 청구되고그러는 건가요?
    Html을 사용할 줄몰라 그림파일변환 후 태그 식으로 사용해봤는데 웹에서 열리는 것은 문제가 없는데 혹시나 이미지호스팅 비용? 같은. 문제가될까 걱정이네요..글을 내려야하는지..
  6. 옵션클릭해서 상세페이지를 넘어가게 되잖아요..거기서 이미지가 왼쪽으로 쏠려서 작게 보이는게 클릭해서 중앙으로 보여지게 하려면 어떻게 해야하나요?
    • 저도 알려주세요
      2018.05.31 15:04 신고 [Edit/Del]
      저도 이거 궁금해서 서칭중이에요. href에 네이버 링크걸면 팝업되어서 잘 보이는데 이미지 소스넣으면 왼쪽으로 찌부되서 돋보기 눌러야 해요ㅠ
  7. 그렇게나 힘들게 설명을 읽고 읽고 또 읽어도 어려워서 찾다 찾다 님 설명을 보고
    한방에 해결이 됐어요.
    저도 모르게 소리를 지르니 같이 있는 동료들이 놀람 ㅋㅋ
    감사합니다 ^ㅡ^
  8. 비밀댓글입니다
  9. 비밀댓글입니다

Name __

Password __

Link (Your Website)

Comment

SECRET

SNS 댓글

작성해주신 댓글은 SNS 계정에 남지 않습니다.

Trackback