3.17. 핫스팟(Hotspot)을 이용한 이미지 맵

제3장 웹 그래픽 기능 익히기 > 3.17. 핫스팟(Hotspot)을 이용한 이미지 맵




이미지 맵이란 하나의 이미지에 영역을 지정해서 다른 문서와 링크하는 기능입니다.

현재 드림위버, 나모 등 웹 편집기 뿐만 아니라 이미지 레디 등 다른 에디터에서도 이 기능을 지원하고 있으며, 파이어웍스에서도 이 기능을 지원하고 있습니다.
핫스팟이란 이미지 맵으로 지정되는 영역을 가리킵니다.

  

1) 다음과 같은 자신의 홈페이지 메뉴가 들어 있는 하나의 이미지를 만듭니다. 
 
▲ 복사해서 따라해보세요.




2) 도구에서 핫스팟(Hotspot) 도구 중에서 자신이 만든 메뉴 이미지의 알맞은 도구를 선택합니다.

여기서는 '사각형 핫스팟 도구'를 선택하겠습니다.




3) 원하는 메뉴로 커서를 가져가 드래그해서 선택 영역을 정합니다.
영역을 선택하면 그림과 같이 표시됩니다.





4) [에셋] 패널의 [URL]탭을 선택하고 다음과 같이 연결할 파일이나 웹페이지를 입력해줍니다.

나머지 버튼들도 핫스팟을 만들고 위와 같은 방법으로 연결해줍니다.
* 연결할 웹 페이지는 새 파일로 각각 만들어 주어야 합니다.


핫스팟의 크기와 위치 등 정보는 [속성]창에 나타납니다. 
똑같은 크기의 영역을 만들려면 수치를 입력하는 것이 정확합니다.
핫스팟의 이동은 마우스보다도 키보드의 방향키 혹은 Shift + 방향키가 더 정확합니다.




5) 여기까지 했다면 이제 이 파일을 HTML문서로 내보내기 하는 일만 남았습니다.

[파일 > 내보내기] 혹은 단축 아이콘 를 선택합니다. 
여기에 폴더와 파일 이름을 정하여주고, [파일 형식]에서 'HTML과 이미지'를 선택하면 주어진 파일 이름과 같은 HTML 문서와 이미지 파일을 만들어줍니다.

그림을 하위 폴더에 넣고 싶으면 아래쪽에 있는 '이미지를 하위 폴더에 놓기'를 체크해줍니다.
이렇게 해주면 HTM 파일이 있는 하위 폴더에 'images'란 폴더가 자동으로 만들어지면서 그 속에 그림 파일이 들어가게 됩니다.