이미지맵 태그로 그림에 링크 거는 법

1.이미지맵 태그

 

이미지 맵이란 하나의 이미지에 좌표값을 넣어 링크 할 수 있도록 설정해 주는 것이다.  <a>태그를 쓰면 이미지 전체를 링크시키지만 이미지맵 태그를 쓰면 그림에서  원하는 부분을 형태별로 좌표로 지정하여 링크시킬  수 있다.

 

일반적인 링크태크
<a href="http://www.naver.com"><img src="pic.jpg></a>

그림을 클릭하면 다른사이트가 연결되어 열림
그러나 이미지맵은 하나의 그림에서 여러개의 사이트를 연결시킨다.

이미지 맵의 기본 형식
이미지 맵은 다음과 같이 이미지 부분과 이미지 맵 시작부분, 맵 종류의 좌표값, 링크될 곳을 설정해주는 부분으로 크게 나누어진다.

 1) <img src="이미지주소" usemap="#맵이름">

이미지 맵이 사용될 이미지가 불려지는 곳이다. 주의 할 점은 이미지 뒤에 usemap="#맵이름"  속성을 반드시 넣어 주어야 한다는 것이다. 맵이름은 사용자가 마음대로 정해서 넣어 주면 되지만, 맵이름은 항상 같아야 하며, 가급적이면 영문 소문자로 정해주는 것이 좋습니다. 웹 페이지의 파일명을 만들 때도 마찬가지로 영문소문자로 정해주면 좋다. 한글로 해되 되긴 하지만 인터넷이 원래 영문권 나라에서 만들어진 것이기에 한글로 해 놓으면 웹 브라우저가 가끔씩 인식을 못하는 경우가 있기 때문이다.

 2)<map name="맵이름">

본격적으로 이미지 맵 태그가 시작되는 부분이다.
이미지 맵  태그는 다음과 같은 형태이다. <map name="맵이름">...</map>
이 부분에서는 위에 1)부분에서 지정해 주었던 맵이름을 name="맵이름"으로 삽입한다.
이것은 이미지와 이미지 맵 태그를 서로 연결시켜 주는 역할을 하기 때문에 아주 중요하다. 반드시 같은 맵이름을 삽입해야 하며, 이번에 주의할점은 "#"표시를 빼 준다는 점이다.

 

3)<area shape="맵형태" coords="좌표값" href="링크될 주소"></map>

여기에서는 이미지맵의 형태와 좌표값이 링크될 주소를 지정해준다. 맵의 형태에는 사각형, 원형, 다각형 등 3가지가 있다. 설정해 줄 때는 "shape"속성을 사용한다.

링크되는 영역의 모양 옵션을 보면...
shape="rect"       ->사각형
shape="circle"    ->원형
shape="poly"       ->다각형

맵의 형태를 지정 했다면 좌표값을 설정해 줄 때는 "coords"속성을 사용한다. 링크될 주소 설정은 이미지 맵을 클릭하면 나타날 웹 페이지나 이미지 등의 주소를 적어주는 곳이다. 사용방법 또한 링크태그와 똑같이 href="링크될 주소"로만 작성하면 된다. 마지막으로 다른 태그와 마찬가지로 이미지 맵 태그도 반드시 </map>마감태그를 사용한다.

드림위버나 나모웹에디터로 이미지맵을 하면 자동으로 소스가 나타난다. 

나모웹에디터로 작성시는 직접 끌어다 맞출 수도 있다.

 
2.이미지맵태그_좌표값읽기(coords)

 이미지 맵을 지정하는 영역의 모양이 사각형일 경우, 원형일 경우, 다각형일 경우에 따라 coords속성의 좌표값이 달라진다.

**이미지 맵을 지정하는 영역의 링크 모양이 사각형일 경우**

형식
<area shape="rect" coords="좌측상단의 가로좌표, 좌측상단의 세로좌표,우측하단의 가로좌표,우측하단의 세로좌표" href="링크하여 이동하게 되는 html문서의 파일명">
 

<area shape="rect" coords="x1,y1,x2,y2" href="링크할 주소">

 

**이미지 맵을 지정하는 영역의 링크 모양이 원형일 경우**

형식

<area shape="circle" coords="원중심의 가로좌표,원중심의 세로좌표,원의 반지름" href="링크하여 이동하게 되는 html문서의 파일명">

 

<area shape="circle" coords="x1,y1,x2,R" href="링크할 주소">

 

**이미지 맵을 지정하는 영역의 링크 모양이 다각형일 경우**

형식

<area shape="poly" coords="다각형 꼭지점의 가로좌표1, 다각형 꼭지점의 세로좌표1,다각형 꼭지점의 가로좌표2, 다각형 꼭지점의 세로좌표2,다각형 꼭지점의 가로좌표3, 다각형 꼭지점의 세로좌표3,다각형 꼭지점의 가로좌표4, 다각형 꼭지점의 세로좌표4,..."

href="링크하여 이동하게 되는 html문서의 파일명">

 

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5" href="링크할 주소">  

좌표값은 포토샵, 페인트샵, 그림판을 이용하여 값을 읽을 수 있다.

 

 

 

 

3. 이미지맵 태그_예제

 

1.사각형

<CENTER><IMG border=0 src="https://sites.google.com/site/yes24image/images/rect.gif" useMap=#naver> <MAP name=naver><AREA href="http://www.naver.com" shape="rect" target=_blank coords="71, 19, 183, 89"></MAP></CENTER>

 

2.원형
<CENTER><IMG border=0 src="https://sites.google.com/site/yes24image/images/circle.gif" width=262 height=115 useMap=#daum> <MAP name=daum><AREA href="http://www.daum.net" shape="circle" target=_blank coords="135, 56, 50"></MAP></CENTER>

3.다각형
<CENTER><IMG border=0 src="https://sites.google.com/site/yes24image/images/poly.gif" width=262 height=115 useMap=#google> <MAP name=google><AREA href="http://www.google.com" shape="poly" target=_blank coords=86,11,200,48,200,102,72,103,112,55></MAP></CENTER>

 

  ◎ 한 그림에 여러개의 링크를 걸 수 있다. 그림판과 워드패드를 열고 그림판에 나타난 좌표값을 워드패드에 적는다.

<IMG border=0 src="https://sites.google.com/site/yes24image/images/website.jpg" useMap="#website"> <MAP name=website>

<AREA href="http://www.naver.com" shape="rect" target=_blank coords="175,13,420,75">
<AREA href="http://www.daum.net" shape="rect"  target=_blank coords="4,83,139,140">
<AREA href="http://www.google.com" shape="rect" target=_blank coords="432,78,575,134">
<AREA href="http://www.yahoo.com" shape="rect"  target=_blank coords="6,227,223,288">
<AREA href="http://www.nate.com" shape="rect"  target=_blank coords="366,238,549,285"></MAP>

 

[출처] 18-2 이미지맵태그_좌표값읽기(coords)