HTML 이미지맵 좌표잡기, 한이미지에 여러개 링크걸기

HTML 이미지맵 좌표잡기, 한이미지에 여러개 링크걸기

하나의 이미지에 여러개의 링크를 거는법으로

이미지맵(image map)을 사용하는데요.

프로그램 다운로드 없이 쉽게 이미지맵 좌표잡아서 링크거는 법이 있답니다.

이미지맵 좌표 잡아주는 사이트

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

이미지맵 html소스

<img src="이미지경로" usemap="#이미지맵이름">

<map name="이미지맵이름">

    <area shape="rect" coords="이미지좌표" href="이동할 링크주소" target="_blank">

</map>

shape="rect"  (rect : 사각형좌표, circle : 원형좌표, poly : 다각형좌표)

coords="이미지좌표"  (시작점x,시작점y,끝점x,끝점y)

target="_blank"   (_self : 현재창, _blank : 새창에서)

그럼 따라해볼까요~~

cat.jpg 하나의 이미지에 naver부분과 daum부분 두군데에 링크를 걸어줄꺼예요.

1. 파일선택 버튼 클릭 cat.jpg파일 저장

2. Upload 버튼 클릭 파일업로드

3. 옆에 accept 클릭

그럼 중간에 cat이미지가 보여집니다.

4. NAVER 부분을 마우스로 긁어주면 0번에 좌표가 만들어집니다. 

5. DAUM 부분을 마우스로 긁어주면 1번에 좌표가 만들어집니다.

6. HTML 버튼(파란색) 클릭하면 아래에 html소스가 나와요.

html소스 복사해서 붙여넣기

<img src="/이미지들어있는폴더/cat.jpg" usemap="#imgmap01">

<map id="imgmap01" name="imgmap01">

    <area shape="rect" alt="네이버" title="" coords="8,15,152,59" href="http://naver.com" target="_blank">

    <area shape="rect" alt="다음" title="" coords="171,15,277,58" href="http://daum.net" target="_blank">

</map>

부분 수정해주면 간단하게 이미지맵 좌표잡아서 링크걸기 끝!