[HTML] map태그, area태그_이미지에 링크걸기

html에서 하나의 이미지에 여러 개의 링크를 거는 방법.

 

▶ 구문

<img src="이미지경로" alt="이미지" usemap="#맵이름"/> 
 <map name=맵이름> 
   <area shapge="" coords="" alt="" href=""></area> 
 </map> 

 

▶ <map> 태그

  - 이미지맵을 만들기 위해 사용.

  - name 속성을 통해 이름 지정

  - <img>태그의 usemap 속성으로 이미지 맵을 지정

  - <map>태그의 name의 이름과 usermap 속성의 value 동일

  - usemap 속성 값 앞에 # 붙여야함

 

▶ <area> 태그

  - 이미지 맵의 영역을 지정하기 위해 사용

  - <map> ~ </map> 요소 내부에 포함

  - <area> 태그에 사용되는 속성

    1) alt : 대체 텍스트 지정

    2) coords : 링크로 사용할 영역 좌표 지정

      a) x1, y1, x2, y2 : 사각형의 각 모서리에 대한 좌표를 명시, shape 속성값이 rect인 경우에만 사용

      b) x, y, 반지름 : 원의 중심점 좌표와 반지름을 명시, shape 속성값이 circle인 경우에만 사용

      c) c1, y1, c2, y2, ...., xn, yn : 다각형의 각 모서리에 대한 좌표를 명시, shape 속성값이 poly인 경우에만 사용

    3) href : 이동할 주소 지정

    4) shape : 영역의 형태를 지정 (default : 화면전체 / rect : 사각형 / circle : 원형 /  poly : 다각형)