[CSS] 이미지 일부에 링크 넣기

이미지 맵

이미지의 일부에 링크가 들어가게 하는 것을 이미지 맵이라고 한다.

map > area 구조의 태그로 사용한다.

사각형으로 이미지 맵 링크 만들기

<img src="이미지 파일 경로" usemap="맵 이름">
<map name="맵 이름">
  	<area shape="rect" coords="117.557.445.553" href="#" title="호버 텍스트">
  	<area shape="rect" coords="117.337.225.443" href="#" title="호버 텍스트">
</map>

shape="rect" : 사각형 지정
coords="왼쪽 상단 x.왼쪽 상단 y.오른쪽 하단 x.오른쪽 하단y" : 좌표 지정
title="호버 텍스트" : hover시 나오는 텍스트

원형으로 이미지 맵 링크 만들기

<img src="이미지 파일 경로" usemap="맵 이름">
<map name="맵 이름">
  	<area shape="circle" coords="320.682.60" href="#" title="호버 텍스트">
    <area shape="circle" coords="240.612.60" href="#" title="호버 텍스트">
</map>

shape="circle" : 사각형 지정
coords="원의 중앙 x.원의 중앙 y.반지름" : 좌표 지정
title="호버 텍스트" : hover시 나오는 텍스트

좌표값 찾기

그림판에서 이미지를 열고 직선을 그어서 하단 표시줄에서 값을 보고 좌표를 측정한다.(권장)

https://www.image-map.net/