이미지 맵

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

서버 사이드 이미지맵 (server side image map)

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

HTML 코드에서 이러한 형태의 서버 사이드 이미지맵을 구현하기 위해서는 앵커(anchor) 태그 <a>...</a> 내부에 존재하는 <img> 태그가 필요하며, 또한 <img> 태그는 꼭 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에서의 클라이언트 사이드 이미지맵은 다음과 같은 두가지 부분으로 구성된다.

1. <img> 태그로 둘러싸인 실제 이미지. 이 이미지 태그는 해당 이미지맵의 이름을 지정해주는 usemap 속성을 가지고 있어야 하며, 이는 여러 개의 이미지맵이 하나의 페이지에 존재 할 수도 있어야 하기 때문이다.
2. <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) 효과를 통해 부분적으로나마 해결할 수 있다.