HTML 5

<map> 활용 : 이미지 맵 좌표(이벤트 페이지 만들기)

mukom 2022. 10. 8. 16:13

1. 이미지 맵이란?

 

하나의 이미지에 여러 개의 링크를 만드는 것을 말한다.

 

 

2. 이미지 맵의 좌표 알아내기 : 원의 중심, 원의 반지름

 

이미지의 특정한 좌표는 그림판을 통해 쉽게 알아낼 수 있다.

좌표를 알아내고자 하는 이미지 파일을 그림판으로 열어보자.

 

1️⃣ 원의 중심 : [선택]을 누르고 원의 중심에 마우스를 가져가서 좌표를 알아낸다.

2️⃣ 원의 반지름 : [선택]을 누르고 원을 감쌀만큼 영역을 선택

이를 통해 대략 원의 반지름은 50px 정도라는 것을 알 수 있다.

 

3️⃣ 좌표 적용하기 : <map> 태그 활용

 

먼저 이미지 맵 대상이 되는 이미지를 <img> 태그에 삽입한다.

<map> 태그를 사용할 것이기 때문에 맵의 이름을 함께 명시한다.

<body>
	<img src="images/chi.png" alt="고양이" usemap="#eventMap">
</body>

그 다음 <map> 태그를 설정한다.

<body>
	<img src="images/chi.png" alt="고양이" usemap="#eventMap">
    <map name="eventMap">
		<area shape="circle" coords="390, 227, 50" href="//www.naver.com"
		alt="네이버로 이동" target="_blank">
	</map>
</body>
👉 shape 속성 : map 으로 묶은 범위의 모양을 나타낸다.
👉 coords 속성 : 면적의 범위를 좌표로 나타낸다. (중점의 x 좌표, 중점의 y 좌표, 원의 반지름)
👉 href 속성 : 해당 면적을 클릭하였을 때 이동하게 될 경로
                       (주소 앞의 // 는 해당 html 파일로부터 열리는 웹 페이지의 프로토콜이 일치한다는 표현)
👉 alt 속성 : 대체 택스트 지정
👉 target 속성 : _blank 값으로 인하여 새 탭에서 링크에 해당하는 페이지가 열린다.

 

 

3. 이미지 맵 좌표 알아내기 : 사각 영역

 

사각 영역에서 필요한 좌표는 사각형의 시작 좌표와 끝 좌표를 알아야 한다.

이번에는 얼굴 전체를 하나의 사각 영역으로 잡고 좌표를 알아보자.

 

1️⃣ 시작 좌표 알아내기

2️⃣ 끝 좌표 알아내기

3️⃣ 좌표 적용하기 : <map> 태그 활용

 

<img> 태그 부분은 위와 동일하기 때문에 <map> 의 <area> 부분만 살펴보자.

<map name="eventMap">
	<area shape="rect" coords="152, 42, 488, 347" href="//www.naver.com"
	alt="네이버로 이동" target="_blank">
</map>

코드를 보면 알 수 있듯이

원에서 사각형으로 바뀌는 것이기 때문에 shape 속성의 값이 'rect' 로 달라졌고,

좌표를 나타내는 coords 속성 또한 값이 하나 더 많아졌다.

원형 coords : (중점의 x 좌표, 중점의 y 좌표, 원의 반지름)
사각형 coords : (시작점의 x 좌표, 시작점의 y 좌표, 끝점의 x 좌표, 끝점의 y 좌표)