HTML 강좌 9강 - HTML 태그 익히기#8 - 이미지맵

HTML 강좌 9강 - HTML 태그 익히기#8 - 이미지맵

이번에는 이미지맵 태그에 대해 알아보겠습니다.

이미지맵 태그란 이미지의 특정 부분을 클릭했을 경우 어떠한 액션이 일어날 수 있도록 하는 기능입니다.

예를 들어 다음과 같은 이미지가 있다고 가정해 봅시다.

(무난한 이미지를 찾다보니 글쓴이의 취향이 그대로 들어나는 이미지를 선택했..)

소주의 라벨부분을 클릭했을 때 네이버로 이동하는 기능을 만들어 보겠습니다.

일단 이미지의 맵.. 즉 클릭을 하는 범위를 지정해주어야 합니다.

그림판에서 이미지를 열어 클릭하고 싶은 범위의 좌표를 보겠습니다.

1번 좌표

소주병의 라벨부분에서 왼쪽 위로 마우스를 가져갔습니다.

붉은색 부분이 바로 소주병의 라벨부분에서 왼쪽 위의 좌표입니다.

이번에는 라벨에서 오른쪽 위 부분을 찾아보겠습니다.

2번 좌표

다시 붉은색 부분이 소주병의 라벨 오른쪽부분 좌표입니다.

첫번째 사진과 공통적인 좌표가 있죠?

같은 높이에서 좌우 위치만 바뀌었으니 높이 좌표값이 같네요.

이와같이 왼쪽 아래부분의 좌표는 첫번째 사진과 좌우 좌표값이 동일하겠네요.

나머지 두군데의 좌표도 마저 구하고 실제 코딩을 해보겠습니다.

3번 좌표

왼쪽 아래부분의 좌표입니다.

4번 좌표

오른쪽 아래부분의 좌표입니다.

전부 네개의 좌표를 구했는데요.

사실 두개의 좌표만 있으면 사각형 모양의 이미지맵을 만들 수 있습니다.

하나의 좌표와 그에 대각선 좌표만 있으면 가능합니다.

왼쪽 위의 좌표와 오른쪽 아래의 좌표로 맵을 만들겠습니다.

왼쪽위의 좌표는 1번 좌표를, 그리고 오른쪽 아래의 좌표는 4번 좌표를 보면 되겠죠.

왼쪽 위 : 66,310

오른쪽 아래 : 240,513

이제 코딩을 해보죠.

그림을 보면서 설명을 하자면...

1. 

<img src="01.jpg" alt="이미지맵" usemap="#map01" border="0">

먼저 이미지를 가져오는 태그입니다.

새로운 속성이 보이네요.

alt 태그는 도움말 같은 기능입니다.

이미지에 마우스를 올리면 alt의 내용이 보여집니다.

(브라우저의 버전에 따라 다를 수 있습니다.)

그리고 usemnap 이라는 속성이 이미지맵을 사용하고자 하는 이미지맵의 name 값을 지정합니다.

2.

<map name="map01">

</map>

map을 선언해주고 맵에대한 좌표를 설정하고 닫아줍니다.

name 속성이 맵의 이름 입니다.

1번 코딩 부분에서 맵의 이름을 사용한다고 선언을 해주었죠.

3.

<area shape="rect" coords="66,310,240,513" href="http://www.naver.com/" target="_blank">

area 태그가 맵의 좌표를 지정해주는 태그입니다.

shape 속성은 맵의 모양입니다.

rect : 사각형

circle : 원형

poly : 다각형

우리는 소주병의 라벨, 즉 사각형 모양의 맵을 설정했으니 rect라고 속성값을 설정한거죠.

그리고 coords 속성이 위에서 구한 좌표의 값입니다.

href 속성은 a링크 태그에서 테스트 한것처럼 이동할 사이트의 주소입니다.

target 속성 역시 a링크 태그에서 사용했습니다.

문서를 실행하면 다음과 같이 이미지가 나오고, 라벨을 클릭하면 네이버로 이동하는 것을 볼 수 있습니다.

cicle 속성값을 사용하면 coords값이 3개가 필요합니다.

정삼각형의 각 꼭지점 세개의 좌표라고 생각하면 될 듯 합니다.

poly 속성값을 사용하면 coods값이 여러개 필요합니다. 

원하는 모양으로 좌표값을 설정할 수 있습니다.

예제 파일은 첨부파일에서 받을 수 있습니다 :)

09.zip