<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image map</title> </head> <body> <!-- # image map - 하나의 이미지에 여러 링크 적용 가능. - image 태그 <img src="" usemap="" /> * usemap : 이미지에서 map을 사용할 것이라고 브라우저에 알려줌. map 태그 <map name=""></map> * name : map 태그에게 붙이는 이름. area 태그 - 이미지 안에 링크 활성화 지역 크기 설정. <area shape="" coords="" title="" href=""/> * shape : 영역의 모양 default(이미지 전체), rect, circle, poly coords : map 좌표, shape 크기 rect - x1, y1, x2, y2 : 사각형 두 꼭지점의 위치 (왼쪽 위,오른쪽 아래) circle - x, y, radius : 원 중심 좌표, 원 반지름 poly - x1, y1, x2, y2, ..... : 3개 이상의 좌표 Mapping Site <http://maschek.hu/imagemap/imgmap/> --> <h2>image map</h2> <br> <img src="../../image/img/G20.jpg" usemap="#g20"> <map name= "g20"> <area shape="rect" coords="426, 342, 489, 377" href="<https://namu.wiki/w/대한민국>"/> <area shape="circle" coords="300, 200, 130" href="<https://namu.wiki/w/G20>"/> <area shape="poly" coords="220, 17, 255, 54, 188, 52" href="<https://namu.wiki/w/미국>"/> </map> </body> </html>
