이미지맵 태그(map, area 태그)

 

 

이미지맵 태그(map, area 태그)

 

map 태그는 이미지맵을 만드는 태그입니다.

 

이미지맵이란 클릭할 수 있는 영역을 지닌 이미지를 말합니다.

 

map 요소는 몇 가지의 area 요소를 포함합니다.

 

area 요소는 이미지맵에서  영역을 지정합니다.

 

사용 예:

<img src="zoo.png" alt="zoo" usemap="#zoo">

 

<map name="zoo" id="zoo">
<area shape="rect" coords="10, 8, 150, 292" alt="giraffe" href="giraffe.html" target="_blank">
<area shape="circle" coords="186, 259, 31" alt="bird" href="bird.html" target="_blank">
 </map>

 

 

 

 

map 요소의 name(또는 id) 속성은 img 요소의 usemap 속성과 관계가 있습니다.

 

따라서, usemap과 name 이름은 동일해야 함.

 

name과 id를 반복해서 쓴 이유는, name 속성이 xhtml에서는 퇴화 속성이기 때문.

 

▶함께 사용할 수 있는 속성

 

속성	속성값	설명
alt	text	area 대체 텍스트. Href 속성이 있으면 필수
coords		area의 좌표. 0,0이 상단 왼쪽임
	x1, y1, x2, y2	사각형 모양일 때(shape="rect") 좌, 상, 우, 하
	x, y, radius	shape="circle"일 때 원형 중앙과 반지름의 좌표
	x1, y1, x2, y2, …. xn, yn	다각형(shape="poly") 끝의 좌표. 첫번째와 마지막 좌표 쌍이 동일하지 않으면, 브라우저는 다각형 가까이에 마지막 좌표 쌍을 추가할 것임
href	url	area 링크 주소
nohref		area 연결 링크가 없음. html5에서 지원하지 않음.
shape		area 모양
	default	기본값으로 전체 영역
	rect	사각형 모양
	circle	원형
	poly	다각형
target		url 을 열 곳
	_blank	문서를 새 창에  엶
	_parent	부모 창에 엶(부모가 없으면 _self 처럼 표시)
	_self	클릭한 바로 그 창에 엶, 기본값
	_top	전체 브라우저 창에 엶
	framename	지정된 프레임 안에 엶
↓↓html5에 새로 추가된 속성↓↓
download	파일 이름	사용자가 링크를 클릭하면 target이 다운로드됨(선택적) herf 속성을 설정될 때만 사용. 값이 생략되면 원래 파일이름이 사용 됨. (ie, safari 지원 하지 않음) 예: download="sample"
hreflang	언어 코드	url의 언어 코드 예: hreflang="en"
media	미디어쿼리	url이 최척화된 미디어나 장치를 지정 예(media="screen and (min-color-index:256)")
rel		현재 문서와 url의 관계
	alternate	문서의 대안 버전. 예: rel="alternate"
	author	저작자
	bookmark
	help	도움말
	license	저작권 정보
	next
	nofollow
	noreferrer
	prefetch
	prev
	search	검색 도구
	tag
type	미디어 유형	url의 미디어 유형(MIME type) 예:(type="image/gif")

 

좌표를 지정할 때 어려울 수 있으므로, 이미지맵 생성기를 이용하면 편리합니다. 

 

 

■  이미지맵 생성기

 

사용법:

1. 사이트 접속 후, 이미지를 올립니다.

2. 사각형(rectangle), 원형(circle), 다각형(polygon) 중 탭을 선택합니다.

3. 이미지의 시작 지점과 끝 지점을 선택합니다.

4. [to html]을 클릭하면 좌표가 입력된 코드가 생성 됨.

 

 

<img src="zoo.png" alt="zoo" usemap="#zoo">
<map name="zoo" id="zoo">
<area shape="rect" coords="10, 8, 150, 292" alt="giraffe" href="giraffe.html" target="_blank">
<area shape="circle" coords="186, 259, 31" alt="bird" href="bird.html" target="_blank">
 </map>

 

 

위의 코드에서 shape="rect"는 사각형 모양이며 (아래 이미지에서 기린)

shape="circle"은 원형(아래 이미지에서) 새

구글 크롬에서 실행하여, 새의 이미지를 클릭하고 나면 이렇게 파란색으로 표시가 되네요.

 

 

 

map.zip파일 다운받아 실행해 보세요~

 

 

<참고 사이트>

 

http://www.w3schools.com/tags/tag_area.asp

 

http://www.html-5-tutorial.com/map-and-area-elements.htm