[상호작용-웹표준 교과서]3. 이미지맵 삽입

1. 이미지맵의 개요

- 이미지맵은 이미지나 오브젝트에 복수의 영역을 지정하여 각 영역에 링크를 설정하든지 프로그램 실행 등의 동작을 지정할 수 있다. 사용자가 각 영역을 클릭하든지 포커스하면 링크가 걸린 곳으로 이동하든지 프로그램이 실행된다.

- 클라이언트  사이드 이미지맵이 서버 사이드 이미지뱁보다 다음에서 우수하다고 되어 있다.

• 브라우저에서 처리가 완결되기 때문에 반응이 빠르다. 브라우저가 좌표정보의 취득에 따라 커서의 형태 변경이나 키보드 조작 등을 접수할 수 있다.
• 비시각계 브라우저에서도 대체정보를 제공할 수 있다.

2. 이미지맵 특유의 요소(map 요소, area 요소)

# map 요소

-  map 요소는 이미지맵을 정의하기 위한 요소이다. 블록 레벨 요소이며 area 요소나 블록레벨 요소, 인라인 요소, 텍스트를 포함할 수 있다.

 - 이미지맵에 이름(식별자)을 지정한다. 구체적으로 object 요소 또는 img 요소의 usemap 속성의 값을 지정하면 그 이미지에 관련시키는 것이 가능하다. 예컨대 object 요소 또는 img 요소에 usemap="#links"라고 지정한 경우 값에는 'links'라고 지정한다.

# area 요소

- area 요소는 이미지맵의 영역을 지정하기 위한 요소이다. area 요소는 빈 요소이며 <area/>라는 형식으로 지정한다. area 요소를 지정한 영역에 중복 부분이 있으면 먼저 지정한 영역이 우선한다.
- 이미지맵의 영역은 a요소에만 지정할 수 있지만 이 경우 반드시 블록 레벨 요소에 포함된 형태로 지정해야 한다.
- 다음은 중요한 속성이다.

 2. 이미지맵의 실제 예

- 이미지맵의 설정에는 img 요소에 의한 방법과 object 요소에 의한 방법이 있다.(input 요소에 type 속성 값이 'image'인 때에도 이미지맵을 지정할 수 있지만 그다지 일반적인 방법이 아니므로 여기에서는 생략한다.)
# img 요소 베이스의 이미지맵

 # object 요소 베이스의 이미지맵

- Object 요소를 사용한 이미지맵의 설정은 다음과 같이 지정한다. (Win IE6등 일부 브라우저가 지원하지 않음)

 4. 이미지 맵 설계의 최선

- 이미지맵을 설정할 때에는 img 요소 대신 object 요소를, area 요소 대신 a 요소를 사용하는 것이 지정할 수 있는 정보의 양이 많기 때문에 접근성이 높은 유연한 설계가 가능하다.
- 예컨대 다음과 같이 object 요소와 a 요소를 사용함으로써 map 요소의 내용은 이미지맵의 영역을 지정하기 위해서만 사용된다. object 요소가 표시되지 않는 환경에서는 map  요소의 내용이 대체 정보로서 표시된다.

 - area 요소가 아니라 a 요소로 이미지맵 영역을 지정하는 경우엔 alt 속성을 지정할 수 없기 때문에 이같이 title 속성으로 대체 텍스트를 지정하는 것이 좋다.
 - map 요소를 object 요소의 범위 밖에 두면 object 요소의 표시 여부에 관계없이 map요소의 내용을 표시할 수 있기 때문에 접근성을 높일 수 있다.

 - map 요소를 object 요소의 범위 밖에 두는 방법은 다음 같은 장점이 있다.

• 시각계 브라우저에 이미지를 표시하지 않게 설정한 때에도 사용자를 혼동시키지 않는다.
• object 요소와 map 요소의 위치를 떨어뜨려 각각 자유롭게 배치할 수 있다. 예컨대 글로벌 내비게이션이나 로컬 네이게이션을 map 요소로 정의하고 object 요소와 조합할 수 있다.

5. 서버 사이드 이미지맵 이용(ismap 속성)

- 서버 사이드 이미지뱁을 사용하려면 img 요소에 ismap 속성을 지정한다. object 요소에는 ismap 속성을 지정할 수 없다. 

 - 브라우저는 a 요소의 href에 지정된 URI를 '?'로 구별하여 클릭 지점의 좌표정보를 파라미터로 부여하는 새로운 URI를 프로그램에 전달한다.
- X좌표가 10이고 Y좌표가 27인 지점을 클리하면 URI는 다음과 같이 지정된다.