DevStudy
이미지맵(Image Map) 본문
1. Image Maps
- HTML에서 이미지맵을 사용하면 이미지의 일부분만 링크를 걸 수 있습니다.
## 문법
<img src="이미지경로" alt="대체텍스트" usemap="#맵이름">
<map name="맵이름">
<area shape="도형유형" coords="링크좌표" alt="대체텍스트" href="링크경로">
</map>** 이때 <img> 태그의 usemap 속성의 맵이름과 <map> 태그의 name 속성의 값은 같아야 합니다.
## map태그의 shape유형
| 유형 | 설명 |
| rect | 직사각형 영역을 정의 |
| circle | 원형 영역을 정의 |
| poly | 다각형 영역을 정의 |
| default | 전체 영역을 정의 |
## 아래 예제들에서 쓸 이미지
2. rect(사각형) 유형의 이미지맵
- rect는 직사각형을 의미합니다.
## 문법
<area shape="rect" coords="좌측상단x축좌표,좌측상단y축좌표,우측하단x축좌표,우측하단y축좌표" alt="대체텍스트" href="링크경로>
## 선택하고 싶은 이미지 영역
노트북 영역만 링크를 걸고자 합니다.
## 좌표 추출
좌측상단의 좌표값
우측하단의 좌표값
## 테스트 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지맵 테스트</title>
</head>
<body>
<img src="laptop.jpg" alt="책상이미지" usemap="#photo">
<map name="photo">
<area shape="rect" coords="185,45,450,400" href="#" alt="노트북이미지">
</map>
</body>
</html>
## 코드 결과
노트북에 올려야만 마우스 손모양이 뜨는 것을 확인할 수 있습니다.
3. circle(원형) 유형의 이미지맵
- circle은 원형을 의미합니다.
## 문법
<area shape="circle" coords="원중심x좌표,원중심y좌표,원의반지름" alt="대체텍스트" href="링크경로>
## 선택하고 싶은 이미지 영역
커피잔부분만 링크를 걸려고 합니다.
## 좌표 추출
원의 중심좌표 추출
원의 반지름 추출
## 테스트 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지맵 테스트</title>
</head>
<body>
<img src="laptop.jpg" alt="책상이미지" usemap="#photo">
<map name="photo">
<area shape="circle" coords="525,338,48" href="#" alt="커피이미지">
</map>
</body>
</html>
## 코드 결과
커피잔 부분에만 마우스 손모양이 올라가는 것이 확인됩니다.
4. poly(다각형) 유형의 이미지맵
- poly는 다각형을 의미합니다.
## 문법
<area shape="poly" coords="a점의x축,a점의y축,b점의x축,b점의y축,..." alt="대체텍스트" href="링크경로>- 두개를 쓰는 것이 아니라 한점한점 모두 쉼표를 통해서 사용합니다.
- 이때 시작점에서 시계방향으로 순서대로 작성해야합니다.
## 선택하고 싶은 이미지 영역
노트부분에만 링크를 걸겠습니다.
## 좌표 추출
각 모서리들의 모든 좌표, 보통 시작에서 시계방향으로 돌면서 선택
## 테스트 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지맵 테스트</title>
</head>
<body>
<img src="laptop.jpg" alt="책상이미지" usemap="#photo">
<map name="photo">
<area shape="poly" coords="7,338,84,210,182,247,115,380" href="#" alt="노트이미지">
</map>
</body>
</html>## 코드 결과
노트부분에만 마우스 손모양으로 바뀌는 것이 확인됩니다.
5. 여러개 이미지맵 처리
- 여러 개의 링크를 하나의 이미지에 설정 가능합니다.
## 테스트 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지맵 테스트</title>
</head>
<body>
<img src="laptop.jpg" alt="책상이미지" usemap="#photo">
<map name="photo">
<area shape="rect" coords="185,45,450,400" href="#" alt="노트북이미지">
<area shape="circle" coords="525,338,48" href="#" alt="커피이미지">
<area shape="poly" coords="7,338,84,210,182,247,115,380" href="#" alt="노트이미지">
</map>
</body>
</html>## 코드 결과
노트, 노트북, 커피잔 모두 마우스 손모양 처리되는 것이 확인됩니다.
6. 이미지맵을 쉽게 처리해주는 사이트
## Free Online Image Map Generator
Free Online Image Map Generator
Easy free online html image map generator. Select an image, click to create your areas and generate html your output!
www.image-map.net
- 위에처럼 코드를 일일이 찾으려면 굉장히 어렵습니다.
- 저같은 경우는 포토샵에서 좌표값을 알아냈습니다.
- 하지만 위의 사이트를 보면 쉽게 찾을 수 있습니다.
## 사용법
- 위에서 보는 것 처럼 사진은 PC에서 불러온 후에 도형유형을 설정하고 범위를 마우스로 컨트롤하면 코드를 알아서 잡아줍니다.
- 위 사이트를 이용하면 좀 더 쉽게 이미지맵을 생성할 수 있습니다.