흥미로운! HTML로만 다른 이미지 부분을 클릭 가능하게 만들기(codepen 미리보기)

이미지의 다른 부분을 클릭 가능하게 만들 수 있습니다.

HTML<map>을 사용하여 클릭 가능한 영역이 있는 이미지인 이미지 맵을 만들 수 있습니다. 이러한 영역은 <area> 태그를 사용하여 정의됩니다.

이미지 맵 작동 방식 이해

이미지(클릭 가능)는 <img> 태그를 사용하여 가져오지만 usemap 속성은 나중에 사용되는 특정 ID로 <img> 태그에 추가됩니다.

예를 들어

<img src="worldmap.png" alt="Worldmap" usemap="#worldmap">

<map> 태그를 사용하면 이미지는 name 태그의 usemap 속성에서 사용되는 ID인 속성 <img>를 사용하는 참조입니다.

<map name="worldmap">

이제 <map> 요소에 중첩된 몇 가지 <area> 요소는 다양한 클릭 가능 영역을 정의하는 데 사용됩니다.

area 요소에서 다음을 선언합니다.

shape : 클릭 가능한 영역의 모양

rect - 직사각형 영역을 정의합니다

.

circle - 원형 영역을 정의합니다

.

poly - 다각형 영역을 정의합니다

.

default - 전체 영역을 정의합니다

.

coords : 해당 지역의 좌표

href : 이미지를 클릭한 후 대상 리소스로 연결되는 링크

<area shape="rect" coords="34,24,270,350" alt="africa" href="https://africa.htm" title="Visit Africa">

예: 클릭 가능한 세계 지도

위에서 설명한 모든 것을 고려하여 완벽하지 않은 이 예는 HTML 이미지 맵의 사용을 보여줍니다.



읽어주셔서 감사합니다(좋아요 😄)