이미지 맵 만들기(이미지 맵 좌표값 쉽게 찾기)

이미지 맵 만들기(이미지 맵 좌표값 쉽게 찾기)

이미지 맵은 하나의 이미지에 여러 개의 링크를 걸수 있어요.
여기에서 usemap의 맵이름과 map 태그안의 name의 맵이름은 동일해야 합니다.

<img src="이미지 파일명" alt="대체 텍스트" usemap="#맵이름">
<map id="맵이름" name="맵이름">
<area shape="rect" coords="맵좌표" href="url" alt="대체 텍스트" title="타이틀">
</map>

 

area shape 맵 모양

area shapge 맵모양은 3가지입니다.
이 세 가지이면 무엇이든지 모양을 만들어 링크할 수 있습니다.

• rect 사각형
• circle 원
• poly 다각형

사각형 맵

<area shape="rect" coords="좌측상단 꼭짓점 x,y 좌표값과 우측하단 x, y 좌표값" href="url" alt="대체 텍스트">

 

 

 

 

원모양 맵

<area shape="circle" coords="원중심점X,Y 좌표값과 원의 반지름" href="url" alt="대체 텍스트">

 

 

 

 

다각형 맵

<area shape="poly" coords="각 꼭짓점의 X, Y 좌표값" href="url" alt="대체 텍스트">

 

좌표값은 한 방향으로 입력해야 합니다.

헛갈리지 않게 시계방향으로 좌표값을 입력하세요.

 

 

 

 

이 좌표값들을 알기 위해서는 포토샵에서 이미지를 불러와서 꼭짓점에 커서를 두면 좌표값이 나타납니다.
그러나 이 방법은 시간이 걸리므로 쉽게 좌표값을 알 수 있는 사이트를 이용하면 편합니다.

 

 

 

이미지 맵 좌표값 쉽게 알기

제가 처음 사용해본 사이트에요.

사이트가 좀 답답해보이지만 단순해서 쓰기 편해요.

 

http://maschek.hu/imagemap/imgmap/

maschek.hu - Online Image Map Editor

 

 

 

좌표값을 얻을 이미지를 [파일선택]해  [upload] 해줍니다.

[accept]를 클릭해야 저 빨강색 네모난 영역에 나타납니다.

 

 

 

이렇게 나타납니다.

총 4개의 아이콘 영역에 이미지맵을 적용하는데요,첫번째 이미지맵 코드를 넣을 수 있는 칸이 보입니다.

 

 

 

파랑색으로 라디오버튼이 선택되어 있는데요. 

여기에서 마우스로 네모난 모양의 이미지맵을 그려주면 생성됩니다.

꼭지점을 찍어서 마지막 꼭지점을 다시한번 콕 찍어주면 사각형맵이 그려집니다.

 

그 다음 아이콘으로 건너가서 또 사각형 맵을 만들어 줍니다.

그러면 Coords 에 좌표값이 나타납니다.

Href 칸에는 링크할 url을 입력해주고

Alt 대체 텍스트

Target 타겟넣어주세요.

 

 

 

 

소스를 복사하려면 Satus 밑에 있는 Code를 클릭하면 됩니다. 

(Paypal 클릭하지 마시구요....)

 

Code 를 복사해서 적용하면 됩니다.

여기에서 id와 name의 이름만 바꿔서 넣어주시면 됩니다.

 

 

 

 

이미지맵 적용할 태그 넣어주세요.

앞에 추가하기 => <img src="이미지파일명" usemap="#imgmap2021616222951" alt="">

 

<img src="이미지파일명" usemap="#imgmap2021616222951" alt="">
<map id="imgmap2021616222951" name="imgmap2021616222951">
<area shape="rect" alt="" title="" coords="56,121,178,257" href="" target="" />
<area shape="rect" alt="" title="" coords="211,116,332,252" href="" target="" />
<area shape="rect" alt="" title="" coords="364,111,477,251" href="" target="" />
<area shape="rect" alt="" title="" coords="507,110,641,253" href="" target="" />
<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
</map>

 

함께 보면 좋은 글

hr 태그 css 100% 활용하기(색상, 두께, 점선)

[html] <button> 링크하기 , 새창 링크하기(a링크, onclick 링크, input 링크)

폰트어썸 - Font Awesome 아이콘 사용법

파비콘 만들기, ico 파일 생성 사이트 이용