이미지맵 태그 - img, map, area

이미지맵 태그

이미지파일에 여러개의 구역으로 나누어 링크를 걸어주는 태그

 

 

1.이미지 맵을 적용하고자 하는 이미지 준비한다.

<img src="이미지 경로">

 

 

2. 이미지맵 태그 map와 이미지태그 img 을 연결할 이름을 지정한다.

이미지의 usemap="이름"과 map name="이름"은 동일하게 해주어야 이미지와 map태그가 연결된다.

이미지 태그에 작성하는 usemap에는 #을 붙여주어야 한다.

<img src="이미지 경로" usemap="#이미지맵">
<map name="이미지맵"></map>

 

 

3. map태그 내부의 area태그에는 다음과 같은 속성을 넣어준다.

shape :  링크를 걸어줄 영역의 모양

- default : 전체 영역

- rect : 직사각형

- circle : 원형

- poly : 다각형

coords : 영역의 좌표

href : 이동될 외부 링크

<img src="이미지 경로" usemap="#이미지맵">
<map name="이미지맵">
<area shape="영역 모양" coords="좌표" href="링크">
</map>

 

 

 

4. coords 좌표

좌표값은 영역의 모양에 따라 다른 값을 넣어주어야 한다.

1) rect 직사각형

<area shape="rect" coords="좌측상단x축좌표,좌측상단y축좌표,우측하단x축좌표,우측하단y축좌표" href="링크">

 

2) circle 원

<area shape="circle" coords="원중심x좌표,원중심y좌표,원의반지름"  href="링크">

 

3) poly 다각형

<area shape="poly" coords="a점의x축,a점의y축,b점의x축,b점의y축,c점의x축..." href="링크">

시작점에서 시계방향으로 순서대로 작성하며, 모든 점을 쉼표로 연결한다.

 

 

 

<img src="img/youtube.jpg" usemap="#m">
    <map name="m">
        <area shape="circle" coords="285,213,22" href="https://www.google.co.kr" target="_blank">
        <area shape="rect" coords="382,383,466,443" href="https://www.youtube.com" target="_blank">
        <area shape="poly" coords="274,383,291,348,304,345,326,418,284,427" href="https://www.naver.com" target="_blank">
    </map>