이미지 맵

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

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

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

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

아래의 예제는 (9,372,66,397) 크기를 가지는 직사각형의 영역을 정의하고 있으며, 사용자가 이 영역 내부의 어느 곳을 클릭하더라도 위키백과의 홈페이지로 이동한다.

```html4strict
<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을 이용한 이미지맵의 크기 변경을 제대로 할 수 없는 기기에서 이미지맵을 제대로 구현하기에 적당하다.

## 이미지 맵의 사용
Image:JoshuaReynoldsParty.jpg | (이미지맵 예시) The Club (dining club) 이 그림에서 사람을 클릭하면 브라우저가 관련된 문서를 열어준다. |350px|thumb

poly 133 343 124 287 159 224 189 228 195 291 222 311 209 343 209 354 243 362 292 466 250 463 Dr Johnson - Dictionary writer
poly 76 224 84 255 43 302 62 400 123 423 121 361 137 344 122 290 111 234 96 225 Boswell - Biographer
poly 190 276 208 240 229 228 247 238 250 258 286 319 282 323 223 323 220 301 200 295 Sir Joshua Reynolds - Host
poly 308 317 311 270 328 261 316 246 320 228 343 227 357 240 377 274 366 284 352 311 319 324 David Garrick - actor
poly 252 406 313 343 341 343 366 280 383 273 372 251 378 222 409 228 414 280 420 292 390 300 374 360 359 437 306 418 313 391 272 415 Edmund Burke - statesman
rect 418 220 452 287 Pasqual Paoli - Corsican patriot
poly 455 238 484 253 505 303 495 363 501 377 491 443 429 439 423 375 466 352 Charles Burney - music historian
poly 501 279 546 237 567 239 572 308 560 326 537 316 530 300 502 289 Thomas Warton - poet laureate
poly 572 453 591 446 572 373 603 351 562 325 592 288 573 260 573 248 591 243 615 254 637 280 655 334 705 396 656 419 625 382 609 391 613 453 Oliver Goldsmith - writer
rect 450 86 584 188 prob.The Infant Academy 1782
rect 286 87 376 191 unknown painting
circle 100 141 20 An unknown portrait
poly 503 192 511 176 532 176 534 200 553 219 554 234 541 236 525 261 506 261 511 220 515 215 servant - poss. Francis Barber
rect 12 10 702 500 Use button to enlarge or use hyperlinks

desc bottom-left


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

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

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

## 각주

분류:HTML