본문 바로가기
html

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

by 지구별에 2015. 2. 25.

 

 

이미지맵 태그(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

반응형

댓글