HTML 이미지 맵으로 포스트 만들기

출처 : 국가정보원(nis.go.kr)

 

 

밝은 이미지 부분을 클릭하면 nis로 이동하고,

어두운 이미지 부분을 클릭하면 ncsc로 이동하는 

이미지 하나에 링크를 여러 개 연결해보는 미션이 주어졌습니다. 

 

keyword : 이미지 맵

- 이미지 맵이란? 이미지에서 링크로 사용할 영역을 표시하는 것입니다.

---

 

우선 선택할 부분의 좌표를 알아야 하는데 이미지 픽셀의 좌표는 윈도우 그림판 같은 프로그램을 이용하면 쉽게 알 수 있습니다.

 

 

남산타워를 클릭하면 페이지가 이동될 수 있도록 합니다.

좌측 하단에 위치 px 정보가 나타납니다.

 

 

(좌측 상단 모서리 부분의 좌표값을 확인합니다, 그리고 우측 하단 모서리 부분의 좌표값을 확인합니다)

<img src="bg_main.jpg" usemap="#gomap">
<map name="gomap">
	<area shape="rect" coords="370, 130, 400, 160" href="https://nis.go.kr" target="_blank">
	<area shape="rect" coords="370, 500, 425, 525" href="https://ncsc.go.kr" target="_blank">
</map>

 

빨간색과 파란색 부분에 위치한 남산타워에 링크가 걸리게 되었습니다.

---