[사이트 추천] 이미지맵 무료로 코딩하기

얼마만의 포스팅인가 ...(먼산)

필자가 아주 유용하게(라고 쓰고 귀찮아서 쓰는 편법이라고 읽는다) 사용하고 있는 무료 이미지맵 코딩 사이트를 추천합니다.

여지껏 몇가지 이미지맵 사이트를 사용해 보았지만 이만큼 쓰기 쉽고 보기 편한 사이트는 없었던 것 같네요.

추가로 계속 리서칭해서 사용해보고 더 좋은 사이트가 있으면 후기 올리겠슴다.

-

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

[사용 방법]

1. 사이트 접속 후 파일 등록

일단 사이트를 접속하면 위와 같은 사이트가 뜨며 'browse for file' 버튼이 보입니다.

이미지맵을 입힐 이미지 파일을 가져옵시다, 이 버튼을 눌러주세요!

2. 이미지맵 시작

파일을 찾아서 등록하면 버튼이 'start mapping'으로 바뀝니다.

이미지를 등록했으면 클릭 클릭!

3. 이미지 확인

니가 등록한 이미지가 이것이 맞으냐아

맞으면 'click to continue'

4. 이미지맵을 시작하려면 마우스 오른쪽 클릭을 해!

위 사이트는 오른쪽 클릭으로 이미지맵 만들기를 시작합니다.

메뉴가 오른쪽 클릭으로 출력됩니다.

5. 이미지맵 메뉴_ 오른쪽 클릭

오른쪽 클릭을 해볼까요?

Create rect - 이미지맵을 사각형으로 만듭니다.

Create Poly - 이미지맵을 Poly형(꼭지점이 있는 도형)으로 만듭니다.

Create circle - 이미지맵을 원형으로 만듭니다.

근데 아무리해도 circle형은 제대로 나오지가 않더라구요 ..이 메뉴는 빼고 사용합시다.

ex1) Create Poly

클릭, 클릭해서 모든점에 이어져있는 이미지맵을 만들 수 있습니다.

만들고 나서 save만 눌러주시면 되요.

보편적으로 버튼용 이미지맵으로 많이 사용하는 사각형용으로 이미지맵 코딩 가져오기를 해보겠습니다.

6. 사각형모양 이미지맵 옵션 ex) Create Rect

Create Rect를 클릭하면 작은 사각형과 옆에 이동가능한 팝업창이 뜹니다.

작은 사각형을 클릭 드래그해서 원하는 모양과 위치를 잡아주세요.

팝업창에 Option부분에서 원하는 설정을 수정해줍니다.

Map url - 링크를 걸고자할 url를 넣어줍니다.

Title - 이 링크의 title을 넣어줍니다.

Alt - 이 링크의 설명을 넣어줍니다.

ID - 이 링크의 아이디를 넣어줍니다. (css나 그 외의 것을 사용할 경우 입력)

실상 Map url 만 넣으면 왠만하면 이미지맵이 등록됩니다.

필요에 의해 나머지 부분은 그 때마다 넣어서 사용하면 됩니다.

7. 사각형모양 이미지맵 이벤트

디자이너나 개발자가 아닌 이상 이 부분도 거의 사용하지 않는 부분이지만.. 써먹으면 유용하니 설명!

_self - 현재 창에서 링크 열기

_blank - 새 창, 탭에서 링크 열기

_parent - 자식값의 창이 열려있을때 원래의 창에서 링크 열기

_top - 프레임으로 되어있을때 가장 윗단에서 링크 열기

그냥 어려움으로 _self와 _blank만 사용하자!

옵션과 이벤트 설정을 완료했다면 Save

8. 이미지맵 완료

빨갛게 변한 사각형이 보인다면 이미지맵 적용 완료!

9. 이미지맵 코드 가져오기

궁극적으로 이미지맵 코드를 다른 곳에 사용하려고 이 사이트를 방문한 것이니

만들어진 코드를 가져와 봅시다.

마우스 오른쪽 클릭 후 Get code

뭔가 주저리주저리 긴 설명이 붙은 창이 뜨지만 싹- 다- 무시하고

제일 하단에 있는 우리에게 필요한 Html image map code 부분을 봅니다.

<img id...~ 해서 </map>까지 이미지맵이 설정된 모습

형광펜으로 설정해놓은 부분은 각 6번과 7번에서 설정해놓은 옵션과 이벤트 설정 부분이 적용된 코드입니다.

여기서 coords="~.~.~.~"는 사각형의 xyzw값이니 건들이면 안됍니다~ 

img id 와 map의 id는 값이 같아야만 이미지맵이 적용되므로 이 곳을 수정할 경우 같이 변경해주세요.

-

* PS : 

코드 맨 하단의

<area shape="rect" coords="668,2008,670,2010" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />

부분은 불필요한 사이트 광고 부분이므로 지우셔도 됩니다.

* PS2 :

이미지맵 사이트내에 잠시 이미지를 저장하는 것이니 따로 등록된 이미지의 주소(src="이미지 주소")를 사용해주세요.