HTML 튜토리얼

HTML 홈 HTML 소개 HTML 편집기 HTML 기본 HTML 요소 HTML 속성 HTML 제목 HTML 단락 HTML 스타일 HTML 서식 HTML 인용문 HTML 주석 HTML 색상 HTML CSS HTML 링크 HTML 이미지 HTML 파비콘 HTML 테이블 HTML 목록 HTML 블록 및 인라인 HTML 클래스 HTML ID HTML 아이프레임 HTML 자바스크립트 HTML 파일 경로 HTML 헤드 HTML 레이아웃 반응형 HTML HTML 컴퓨터 코드 HTML 의미론 HTML 스타일 가이드 HTML 엔티티 HTML 기호 HTML 이모티콘 HTML 문자 집합 HTML URL 인코딩 HTML 대 XHTML

HTML 양식

HTML 양식 HTML 양식 속성 HTML 양식 요소 HTML 입력 유형 HTML 입력 속성 HTML 입력 양식 속성

HTML 그래픽

HTML 캔버스 HTML SVG

HTML 미디어

HTML 미디어 HTML 비디오 HTML 오디오 HTML 플러그인 HTML 유튜브

HTML API

HTML 지리적 위치 HTML 드래그/드롭 HTML 웹 스토리지 HTML 웹 작업자 HTML SSE

HTML 예제

HTML 예제 HTML 퀴즈 HTML 연습 HTML 인증서 HTML 요약 HTML 접근성

HTML 참조

HTML 태그 목록 HTML 속성 HTML 전역 속성 HTML 브라우저 지원 HTML 이벤트 HTML 색상 HTML 캔버스 HTML 오디오/비디오 HTML 문서 유형 HTML 문자 집합 HTML URL 인코딩 HTML 언어 코드 HTTP 메시지 HTTP 메소드 PX에서 EM으로 변환기 키보드 단축키

HTML 이미지 맵


HTML 이미지 맵을 사용하여 이미지에 클릭 가능한 영역을 만들 수 있습니다.


이미지 맵

HTML <map>태그는 이미지 맵을 정의합니다. 이미지 맵은 클릭 가능한 영역이 있는 이미지입니다. 영역은 하나 이상의 <area>태그로 정의됩니다.

아래 이미지에서 컴퓨터, 전화 또는 커피 한 잔을 클릭해 보세요.

직장 Sun Mercury Venus

예시

위 이미지 맵의 HTML 소스 코드는 다음과 같습니다.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

어떻게 작동합니까?

이미지 맵의 기본 개념은 이미지에서 클릭하는 위치에 따라 다른 작업을 수행할 수 있어야 한다는 것입니다.

이미지 맵을 만들려면 이미지와 클릭 가능한 영역을 설명하는 HTML 코드가 필요합니다.



이미지

<img>태그 를 사용하여 이미지를 삽입합니다 . 다른 이미지와의 유일한 차이점은 usemap속성을 추가해야 한다는 것입니다.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

usemap값은 해시 태그로 시작하고 #뒤에 이미지 맵의 이름이 오고 이미지와 이미지 맵 간의 관계를 생성하는 데 사용됩니다.

팁: 모든 이미지를 이미지 맵으로 사용할 수 있습니다!


이미지 맵 생성

그런 다음 <map>요소를 추가합니다.

요소 는 이미지 맵을 만드는 데 사용되며 필수 속성 <map>을 사용하여 이미지에 연결됩니다 .name

<map name="workmap">

속성 은 name속성과 동일한 값을 가져야 합니다 .<img>usemap


지역

그런 다음 클릭 가능한 영역을 추가합니다.

클릭 가능한 영역은 <area>요소를 사용하여 정의됩니다.

모양

클릭 가능한 영역의 모양을 정의해야 하며 다음 값 중 하나를 선택할 수 있습니다.

  • rect- 직사각형 영역을 정의합니다.
  • circle- 원형 영역을 정의합니다.
  • poly- 다각형 영역을 정의합니다.
  • default- 전체 지역을 정의

또한 클릭 가능한 영역을 이미지에 배치할 수 있도록 일부 좌표를 정의해야 합니다. 


모양 = "직사각형"

에 대한 좌표 shape="rect"는 x축에 대한 좌표와 y축에 대한 좌표가 쌍으로 제공됩니다.

따라서 좌표 34,44는 왼쪽 여백에서 34픽셀, 위쪽에서 44픽셀에 위치합니다.

직장

좌표 270,350는 왼쪽 여백에서 270픽셀, 위쪽에서 350픽셀 떨어져 있습니다.

직장

이제 클릭 가능한 직사각형 영역을 만들기에 충분한 데이터가 있습니다.

예시

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

이것은 클릭할 수 있는 영역이며 사용자를 "computer.htm" 페이지로 보냅니다.

직장

모양 = "원"

원 영역을 추가하려면 먼저 원의 중심 좌표를 찾습니다.

337,300

직장

그런 다음 원의 반지름을 지정합니다.

44픽셀

직장

이제 클릭 가능한 원형 영역을 만들기에 충분한 데이터가 있습니다.

예시

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

이것은 클릭할 수 있는 영역이며 사용자를 "coffee.htm" 페이지로 보냅니다.

직장

모양 = "폴리"

shape="poly"직선(다각형)으로 구성된 모양을 만드는 여러 좌표점을 포함합니다 .

이것은 모든 모양을 만드는 데 사용할 수 있습니다.

마치 크루아상 모양처럼!

아래 이미지의 크로와상을 클릭 가능한 링크로 만들려면 어떻게 해야 하나요?

프랑스 음식

크루아상의 모든 모서리에 대한 x 및 y 좌표를 찾아야 합니다.

프랑스 음식

좌표는 쌍으로 제공됩니다. 하나는 x축용이고 다른 하나는 y축용입니다.

예시

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

이것은 클릭할 수 있는 영역이며 사용자를 "croissant.htm" 페이지로 보냅니다.

프랑스 음식

이미지 맵 및 자바스크립트

클릭 가능한 영역은 JavaScript 기능을 트리거할 수도 있습니다.

click요소에 이벤트를 추가하여 <area>JavaScript 기능을 실행합니다.

예시

여기에서는 onclick 속성을 사용하여 영역을 클릭할 때 JavaScript 기능을 실행합니다.

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

단원 요약

  • HTML <map>요소를 사용하여 이미지 맵 정의
  • HTML <area>요소를 사용하여 이미지 맵에서 클릭 가능한 영역 정의
  • 요소 의 HTML usemap속성을 사용 <img>하여 이미지 맵을 가리킵니다.

HTML 이미지 태그

Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources

사용 가능한 모든 HTML 태그의 전체 목록을 보려면 HTML 태그 참조 를 방문하십시오 .