img & map 태그

1.준비: png, jpg, pdf 파일 중 하나

2. 설명

🔹img 태그 src 속성을 통해 'area태그'를 지정할 제주도 지도를 가져온다.
🔹img태그에 usemap 속성="#jeju", map태그의 name=jeju
🔹area 태그의 shape 속성은 rect, circle, poly
🔹coords 속성은 좌표를 의미하는데 '그림판'에서 아래의 px를 활용하여 확인 가능하다
🔹href 속성은 파일의 위치 또는 URL

<img src="../img/jeju.png" usemap="#jejuMap" />
<p>제주도 지도 지역별 링크 걸기</p>
<!-- 다른 내용이 있을 때는 map태그를 마지막으로 구현한다. -->
<map name="jejuMap">

  <!-- 사격형 모양으로 링크걸기
  	*shape: 범위설정 모양(rect, circle, poly)
  	*coords: 좌표
  	*href: 이동할 주소
  -->
   <!-- x1, y1 ,x2 ,y2 -->	
  <area shape="rect" coords="190, 105, 340, 185" href="../Index.html"/>
   <!-- x:470, y:280 ,r:50 -->
  <area shape="circle" coords= "470, 280, 50" href="https://www.jeju.go.kr/" target="_blank" />
   <!-- x1,y1,x2,y2,x3,y3,x4,y4 -->	
</map>

3. 제주도 지도에서 '좌표 지정 부분'에서 소스의 위치로 이동이 가능하다.