HTML <img> usemap 속성

HTML <img> 태그

정의와 사용법

usemap 속성은 이미지를 클라이언트 이미지 맵핑으로 정의합니다.

이미지 맵핑은 클릭 가능区域的 이미지를 의미합니다.

usemap 속성이 <map> 요소 name 또는 id 속성과 연결되어 <img>와 <map> 간의 관계를 구축합니다.

주의:img 요소가 a 또는 button 요소의 자식이면 사용할 수 없습니다. usemap 속성.

확장 읽기: usemap 속성 설명

예제

클릭 가능区域的 이미지 맵핑:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Computer" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Phone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Cup of coffee" href="coffee.html">
</map>

직접 테스트해 보세요

문법

<img usemap="#mapname">

속성 값

값 설명
#mapname 해시 문자(#)와 사용할 <map> 요소 이름을 추가합니다.

확장 읽기: usemap 속성 설명

usemap 속성은 "클라이언트" 이미지 맵핑 메커니즘을 제공하며, 서버 측에서 마우스 좌표 처리와 그로 인한 네트워크 지연 문제를 효과적으로 제거합니다. 특별한 <map>과 <area> 태그를 통해 HTML 작성자는 usemap 이미지中超链接의 감응 영역 좌표를 설명하는 맵핑을 제공할 수 있습니다. 이 맵핑은 해당超链接 URL도 포함하고 있습니다. usemap 속성의 값은 URL로, 특별한 <map> 영역을 가리킵니다. 사용자 컴퓨터의 브라우저는 이미지에서 마우스 클릭 시 좌표를 특정 동작으로 변환하며, 다른 문서를 로드하고 표시합니다.

저희가 예를 들어 설명해 보겠습니다. 아래의 소스 코드는 100x100 픽셀의 이미지 map.gif를 4개의 영역으로 맵핑하며, 사용자가 그 중 하나를 클릭하면 다른 문서로 이동합니다. 주의해 주세요, 이 <img> 태그에서는 ismap 이미지 맵핑 기능을 효과적으로 포함하고 있습니다. 따라서 usemap 처리 기능을 가지지 않는 브라우저 사용자도 서버 측 메커니즘을 통해 이미지 맵핑을 다른 방법으로 처리할 수 있습니다:

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

ismap 속성과 usemap 속성의 사용 차이

이미지 맵은 ismap과 usemap 속성을 잘 적용한 예제로, 전국의 대형 회사 웹 페이지를 볼 때, 사용자는 자신이 거주하는 도시를 클릭하여 근처의 리테일 스토어의 주소와 전화번호 등을 얻을 수 있습니다.

usemap 클라이언트가 이미지 맵을 처리하는 장점은 서버나 특별한 서버 소프트웨어가 필요하지 않다는 점입니다. ismap 메커니즘과는 달리, 웹(네트워크)이 없는 환경에서 사용할 수 있습니다. 예를 들어, 로컬 파일이나 CD-ROM에서 사용할 수 있습니다.

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원

HTML <img> 태그