In HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

Server-side
Server-side image maps were first supported in Mosaic (web browser) version 1.1.  Server-side image maps enable the web browser to send positional information to the server about where the user clicks within an image.  This allows the server to make pixel-by-pixel decisions about what content to return in response (possible methods are to use image mask layers, database queries, or configuration files on the server).

The HTML code for this type of server-side image map requires the  tag to be inside an anchor tag ... and the  must include the ismap attribute.
<a href="/imagemapper"><img src="image.png" ismap /></a>
When the user clicks inside the image the browser will append the X and Y coordinates (relative to the upper-left corner of the image) to the anchor URL as a query string and will access the resulting URL (for example, /imagemapper?3,9).

If the browser does not support ismap then the query string must not be added to the anchor URL and the server should respond appropriately (for example, by returning a text-only navigation page).

Client-side
Client-side image maps were introduced in HTML 3.2, and do not require any special logic to be executed on the server (they are fully client-side). They also do not require any JavaScript.

Pure HTML
A client-side imagemap in HTML consists of two parts:
 the actual image, which is embedded with the  tag. The image tag must have an attribute usemap, which names the imagemap to use for this image (multiple imagemaps may exist on a single page).
 A <map> element, and inside that, <area> elements, each of which defines a single clickable area within the imagemap. These are similar to the <a> tag defining which URL should be opened for an ordinary web link. A title attribute may be provided, which may be rendered as a tooltip if a desktop user hovers their mouse pointer over the area. For web accessibility reasons, it is often important – and in some cases it may even be a legal or contractual requirement – to provide an alt attribute describing the link that screen reader software can read to, for example, blind users.

The <area> elements can be rectangles (shape="rect"), polygons (shape="poly") or circles (shape="circle").
Shape-Values are coordinate-pairs. Every pair has an X and a Y value (from left/top of an image) and is separated with a comma.

 Rectangle: Set four coordinates: "x1,y1,x2,y2"
 Polygon: Set as many coordinates as desired (a multiple of two): "x1,y1,x2,y2, [...] xn,yn"
 Circle: One coordinate-pair and another value with a radius: "x1,y1,radius"

The following example defines a rectangular area ("9,372,66,397"). When a user clicks anywhere inside this area, they are taken to the English Wikipedia's home page.
<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="https://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" />
</map>

CSS
A more modern approach is to overlay links on an image using CSS absolute positioning; however, this only supports rectangular clickable areas. This CSS technique may be suitable for making an image map work properly on iPhones, which can fail to rescale pure HTML image maps correctly.

Creation and use

It is possible to create client-side image maps by hand using a text editor, but doing so requires web designers to know how to code HTML as well as how to enumerate the coordinates of the areas they wish to place over the image. As a result, most image maps coded by hand are simple polygons.

Because creating image maps in a text editor requires much time and effort, many applications have been designed to allow web designers to create image maps quickly and easily, much as they would create shapes in a vector graphics editor. Examples of these applications are Adobe's Dreamweaver or KImageMapEditor (for KDE), and the imagemap plugin found in GIMP. The free and open-source office suite LibreOffice also includes a dedicated ImageMap editor.

Image maps which do not make their clickable areas obvious risk subjecting the user to mystery meat navigation. Even when they do, where they lead may not be obvious. This can be partially remedied with rollover effects.

SVG images
Because the Scalable Vector Graphics (SVG) image format provides its own mechanisms for adding hyperlinks and other, more sophisticated forms of interactivity to images, traditional image map techniques are generally not necessary when working with vector images in the SVG format.

See also 
 Mystery meat navigation

References

HTML
XHTML
Articles containing image maps
HTML과 XHTML에서 이미지 맵()은 특정 이미지의 좌표 목록을 말하며, (이미지의 전체 영역을 하나의 문서에 일반적인 이미지 링크와는 달리) 이미지를 영역에 따라 다른 문서나 URL 등으로 연결하는 하이퍼링크를 생성하기 위해 만들어졌다. 예를 들어, 세계지도에서 각 국가는 그 국가의 자세한 정보로 연결되는 하이퍼링크를 가질 수 있다. 이미지 맵의 목적은 하나의 그림을 여러 개의 그림파일로 분할할 필요 없이 이미지의 여러 영역에 링크를 만드는 간단한 방법을 제공하는 것이다.

서버 사이드 이미지맵 (server side image map) 
서버 사이드 이미지맵은 모자이크 (웹 브라우저) 버전 1.1에서 처음으로 지원하기 시작했다. 서버 사이드 이미지맵은 웹 브라우저에서 유저가 이미지 내부의 어느 부분을 클릭했는지에 대한 위치 정보를 서버로 전송 할 수 있게 해 주며, 서버에서는 이 정보를 가지고 픽셀 단위로 계산해서 어떤 컨텐츠가 사용자에게 리턴되어야 하는지를 결정해서 보내 줄 수 있다. 이때 서버에서 리턴되어야 할 컨텐츠를 계산하기 위해서는 이미지 마스크 레이어, 데이터베이스 쿼리, 또는 서버 상의 설정 파일 등을 이용할 수 있다.

HTML 코드에서 이러한 형태의 서버 사이드 이미지맵을 구현하기 위해서는 앵커(anchor) 태그 ... 내부에 존재하는  태그가 필요하며, 또한  태그는 꼭 ismap 속성을 가져야만 한다.
<a href="/imagemapper"><img src="image.gif" ismap/></a>

유저가 이미지 내부의 한 부분을 클릭하게 되면, 브라우저는 이때의 (이미지의 우측 상단을 기준으로) X, Y 좌표 값을 앵커 URL에 쿼리 스트링(query string)의 형태로 붙여서 접근한다 (예, /imagemapper?3,9).

만약 브라우저가 ismap 속성을 지원하지 않는다면, 당연히 클릭 좌표에 해당하는 쿼리 스트링이 앵커 URL에 포함되어 있지 않게 될 것이며, 이런 경우에도 서버는 텍스트만 있는 네비게이션 페이지를 리턴하는 등의 적절한 응답을 보내 주어야 한다.

클라이언트 사이드 이미지맵 (client side image map) 
클라이언트 사이드 이미지맵은 HTML 3.2 버전에서 처음으로 소개되었다. 이때부터는 모든 로직이 클라이언트 사이드에 존재하게 되었으며, 따라서 서버에서는 어떤 특별한 로직도 필요하지 않게 되었다. 또한 이미지 맵 구현을 위한 자바 스크립트도 더이상 필요 없게 되었다.

HTML
HTML에서의 클라이언트 사이드 이미지맵은 다음과 같은 두가지 부분으로 구성된다.
  태그로 둘러싸인 실제 이미지. 이 이미지 태그는 해당 이미지맵의 이름을 지정해주는 usemap 속성을 가지고 있어야 하며, 이는 여러 개의 이미지맵이 하나의 페이지에 존재 할 수도 있어야 하기 때문이다.
 <map> 엘리먼트와, 이미지맵 내부에서 클릭할 수 있는 각각의 영역을 정의해 주는 <area> 엘리먼트들. 이것들은 보통의 웹 링크(web link)에서 어떤 URL이 열려야 하는지를 정의해 주는 <a> 태그와 비슷하다. 여기에 title 속성이 추가로 제공될 수도 있는데, 이 경우에는 데스크탑 사용자가 마우스 포인터를 해당 영역에 hover 했을 경우 나타나는 툴팁처럼 동작하게 된다. 또한 여기에 alt 속성을 추가할 수도 있는데, 이는 스크린 리더와 같은 프로그램이 맹인인 유저에게 각각이 어떤 링크를 나타내는지 알려주기 위해 사용되기 때문에 흔히 웹 접근성의 관점에서, 또는 때때로 법적인 이유나 계약상의 요구 사항에 의해 중요하게 여겨지기도 한다.

아래의 예제는 (9,372,66,397) 크기를 가지는 직사각형의 영역을 정의하고 있으며, 사용자가 이 영역 내부의 어느 곳을 클릭하더라도 위키백과의 홈페이지로 이동한다.
<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="https://ko.wikipedia.org/" alt="위키백과" title="위키백과" />
</map>

자바스크립트
클라이언트 사이드 이미지맵은 자바스크립트를 이용해서 구현할 수도 있다.

CSS AC
좀 더 최근에는 CSS의 절대 좌표 기법을 이용해서 이미지 위에 링크들을 덧붙이는 방법이 사용되고 있는데, 다만 이 방법은 직사각형 형태의 클릭 영역 밖에는 지원하지 않는다는 단점이 있다. 이러한 CSS 기법은 아이폰과 같이 HTML을 이용한 이미지맵의 크기 변경을 제대로 할 수 없는 기기에서 이미지맵을 제대로 구현하기에 적당하다.

이미지 맵의 사용

클라이언트 사이드 이미지 맵은 텍스트 에디터를 이용해 수동으로 만들 수도 있지만, 그렇게 하기 위해서는 웹 디자이너가 HTML 코딩 방법 뿐만 아니라 그림의 원하는 영역에 어떻게 좌표 목록을 열거 하는지도 알아야 한다. 때문에 수동으로 코딩한 이미지 맵은 대부분 단순한 다각형의 모양인 경우가 많다.

텍스트 에디터로 이미지 맵을 만드는 것은 많은 시간과 노력을 필요로 하므로 웹 디자이너들이 벡터 그래픽 에디터에서 도형을 만드는 것만큼 빠르고 쉽게 이미지 맵을 설계할 수 있도록 많은 응용 프로그램이 만들어졌다. 이러한 응용 프로그램의 예로는 어도비 Dreamweaver나 KDE용 KImageMapEditor, 그리고 GIMP의 imagemap plugin 등이 있다.

클릭할 수 있는 영역이 불분명한 이미지 맵은 사용자에게 미스터리 미트 내비게이션 (mystery meat navigation) 과 같은 불편을 줄 수 있으며, 클릭 했을때의 링크도 명확하지 않을 수 있다. 이러한 문제는 롤오버 (rollover) 효과를 통해 부분적으로나마 해결할 수 있다.

참고 문헌 

HTML