01. 이미지맵(Image Map)이란?
하나의 이미지를 일정 구역으로 분할해, 각 영역에 하이퍼링크를 연결하여 특정 영역을 클릭하면 지정된 페이지로 이동할 수 있도록 하는것을 이미지맵이라 합니다.
<img>태그에 링크를 연결했을 경우 보통 하나의 이미지에는 하나의 URL만 연결하지만, 이미지맵을 이용하면 하나의 이미지를 여러 영역으로 나누어 여러 개의 링크를 설정할 수가 있습니다.
02. 이미지맵 만들기
웹 문서에서 이미지맵을 나타내기 위해선 <map>태그와 <area>태그가 필요합니다. 그와 함께 <img>태그도 필요하고(이미지 삽입), <area>요소가 항상 <map>태그 내부에 중첩된다는 특징도 있습니다.
<map>태그 속성
속성 |
값 |
설명 |
name |
mapname |
이미지맵의 이름 지정(필수 사항) |
<area>태그 속성
속성 |
값 |
설명 |
HTML5 지원 |
||
alt |
text |
영역의 대체 텍스트 지정(href 속성 사용시 필요) |
coords |
coordinates |
영역의 좌표 지정 |
download |
filename |
사용자가 하이퍼링크 클릭시 파일을 다운받도록 지정 |
href |
URL |
해당 영역의 하이퍼링크 대상 지정 |
hreflang |
language_code |
대상 URL의 언어 지정 |
media |
media query |
대상 URL이 어떤 장치/미디어에 최적화되어 있는지 지정 |
rel |
alternate/author/bookmark/ help/license/next/nofollow/ noreferrer/prefetch/prev/ search/tag |
현재 문서와 대상 URL간의 관계 지정 |
shape |
default/rect(사각형)/ circle(원)/poly(다각형) |
영역의 모양 지정 |
target |
_blank/_parent/_self/ _top/framename |
대상 URL을 열 위치 지정 |
type |
media_type |
대상 URL의 미디어 유형 지정 |
HTML5 미지원 |
||
nohref |
value |
영역에 관련 링크가 없음을 지정 |
예제
이 사진의 회색으로 칠해진 부분에 각각 다른 링크를 연결하는 이미지 맵을 만들어 보도록 하겠습니다.
1) 먼저 'images'폴더에 위 사진을 다운받고 html편집기에 다음과 같이 작성합니다. 가장 처음에 이미지맵을 만들 이미지를 삽입한 후 <map>태그를 사용해주고 설정할 영역마다 <area>태그를 입력해 주었습니다. (<area>에서 좌표 잡는 방법을 예제 아래에 작성하였습니다.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <title>이미지맵 만들기</title> <meta charset="utf-8"> <head> <body> <img src="images/map.png" usemap="#imagemap"> <map name="imagemap"> <area shape="rect" coords="37,90,136,171" href="http://www.naver.com/"> <area shape="circle" coords="287,128,43" href="http://www.daum.net/"> <area shape="poly" coords="468,84,517,116,500,170,437,170,419,116" href="https://www.google.co.kr/"> </map> </body> </html> | cs |
2) 저장 후 브라우저로 열어보면 회색 부분에 마우스 커서를 가져다 대었을 시 손가락 모양으로 바뀌고, 클릭하면 각각 연결해주었던 링크로 이동하게 됩니다.
03. <area>태그와 관련하여
shape 속성의 값
default - 전체 영역 지정
rect - 직사각형 영역 지정 (대각선이 되는 2개의 좌표)
circle - 원형 영역 지정 (원의 중심 좌표와 반지름)
poly - 다각형 영역 지정 (좌표가 3개 이상인 경우)
coords 속성의 값(좌표)
좌표 쉽게 구하는 방법
1) 그림판을 켜고 사용할 이미지 파일을 엽니다. (저는 예제에서 썼던 이미지를 불러왔습니다.)
2) 이미지의 원하는 곳에 마우스 포인터를 올립니다.
3) 그리고 창 왼쪽 하단에 보면 현재 마우스가 위치한 곳의 좌표 정보가 뜨는 것을 볼 수 있습니다. 이걸 그대로 입력하면 됩니다.
'프로그래밍 > 웹표준' 카테고리의 다른 글
| 11. 내부 프레임 <iframe> (0) | 2017.01.23 |
|---|---|
| 10. 멀티미디어 삽입하기 (0) | 2017.01.20 |
| 8. 문서 연결 태그 <a>태그 (0) | 2017.01.15 |
| 7. 이미지 삽입 태그 <img> (0) | 2017.01.13 |
| 6. 목록을 만드는 태그 <ul>, <ol>, <dl> (0) | 2017.01.11 |
댓글,
