이미지맵의 이해

03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 10. 22. 11:14

이미지맵의 이해

이미지맵의 이해

WHAT is IMAGEMAP? 일단 이미지맵이 무엇인지 이해를 돕기위해서 아래 그림위에 마우스를 이리저리 옮겨 보십시오. 아래의 그림은 대표적인 포탈사이트를 표현한 한장의 그림입니다. 각각의 사이트 이름 위에 마우스를 얹어놓으면 링크가 되어 있음을 알 수 있고 누르미(마우스버턴)를 누르면 해당 사이트로 이동이 된다는 것도 알 수 있다. 이와 같이 이미지의 특정 부분에 특정 사이트를 연결시켜 놓는 방식이 바로 이미지맵이다.
위의 이미지맵 구현은 아래와 같은 방식으로 이루어졌습니다. 아마 아래의 소스를 잘 관찰하면 이미지맵의 구현은 두 부분으로 이루어져 있다는 것을 알 수 있을 겁니다. 이미지맵 선언부인 <map> 과 </map> 으로 이루어진 부분과 이미지 삽입 부분(img src="URL")으로 말입니다. 그러면 소스 아랫 부분에서 이미지맵 작성법에 대하여 설명하기로 합시다.

</body>
</html>

이미지맵의 작성

일단 <map> 과 </map>을 선언해서 이미지맵의 시작을 알린다. <map> 태그 내에는 'name' 속성을 지정한다. 위의 소스처럼 'portal' 이라고 했다면 이제 'portal'이라는 이름의 맵정보가 만들어진다.
이제는 <map> 과 </map> 사이에 맵의 구조를 설정해 주어야 한다. 다시 말한다면 링크하고자하는 부분의 영역 설정을 지정한다는 말이된다. 이미지맵의 영역 설정은 <area>태그를 사용한다. <area>태그내에 모양 설정과 모양의 범위를 설정하는데 모양 설정은 'shape' 속성을 이용하고 범위는 'coords' 속성을 사용한다. 'shape'에는 사각형 'rect', 과 원 'circle', 그리고 다각형 'poly' 가 하부 선택자로 있다. 'coords' 속성은 'shape'에서 지정한 도형의 x, y 좌표를 나타내준다. 이 좌표 따는 법은 여러가지가 있는데 전용 소프트웨어를 사용하든지 아니면 페인터샵 이라든지 포토샵을 이용해서 좌표를 구할 수 있다. 표토샵에서 좌표를 구하는 방법은 아래에 설명되어 있다. 마지막으로 'href' 속성에 이동하고 싶은 URL을 지정한다. 그리고 마침태그 </map>를 이용해서 구문을 닫는다.
이미지맵의 구조 작업이 끝났으면 다음엔 문서에 이미지를 삽입해야 한다. 이미지 삽입은 <img>로 시작하죠. 'src'를 선언해서 이미지가 위치한 곳의 URL을 지정해주고 중요한 것은 'usemap' 속성을 첨가해 앞서 정의한 맵의 구조를 참조하도록 한다. usemap="#name" 처럼 선언해서 이미지맵의 구조를 불러오는 것이다. 이것으로 이미지맵의 절차는 모두 끝났다.

이미지맵의 좌표따기

포토샵을 열고 좌표를 따고 싶은 그림을 불러 온다. 그리고 오른쪽 그림과 같이 도구상자에서 사각영역 선택도구(rectangular marquee tool)을 선택한다.
다음에는 팔레트에서 왼쪽 그림과 같이 인포메이션 팔레트를 선택해서 열어 놓습니다.('info'팔레트는 'navigator'와 'option'이 함께 묶여져 있습니다.) 만약 이 팔레트가 열려 있지 않다면 메뉴 중 'window/show info'를 선택하면 이 팔레트가 열린다. (참고 : 팔레트와 툴박스 나타내기 ; Tab 키를 누르면 툴박스와 팔레트 전부 보이지 않게 됩니다. 다시 Tab 키를 누르면 다 보입니다. 툴박스와 팔레트가 보이지 않는 상태에서 Shift + Tab 키를 누르면 팔레트만 보입니다.)
자 이제 좌표 딸 준비는 다 되었습니다. 이미 사각형 영역 선택도구를 선택해 놓았지요. 누르미(마우스)를 열어 놓은 그림 위로 올려 보세요. 그리고 'info' 팔레트에서 2번을 유심히 관찰해 보세요. 그러면 가로, 세로축(x, y)의 숫자가 변하고 있는 것이 보이지요. 바로 이것이 열어 놓은 그림에서의 위치(좌표)입니다. 참고로 사각 영역의 좌표 구성은 사각형의 왼쪽 위(1번)에서 오른쪽 아래(2번)로 위치 수치가 증가하며 따라서 사각형의 좌표 따기는 사각형의 왼쪽 위 시작점(1번)과 오른쪽 아래점(2번)의 좌표를 따면 됩니다. 다시 부연하면 시작점과 마침점의 각각 x, y축의 수치를 그대로 적으면 됩니다. 만약 시작점의 x, y축의 좌표(1번)가 '58,50'이고 오른쪽 아래 좌표(2번)가 '162,87'이었다면 '<area shape="rect" coords="58,50,162,87" 와 같이 적어주면 됩니다.
만약 이미지맵에서 선택 영역을 원(circle)으로 지정했다면 그 좌표도 원으로 지정해야 하겠지요. 우선 포토샵에서 선택도구 즉 마퀴툴을 바꾸어야 합니다. 위에서 사각형 선택도구를 설정해 놓았으니까 rectangular marquee tool을 다시 한번 꼭 눌러 보세요. 그러면 하위 도구가 나타나지요. 그기서 원선택 도구가 나타났지요. 원을 선택하세요. 다음 이제 열어 놓은 그림 위로 누르미를 옮기고 글쇠판에서 'shift'글쇠를 누른 상태(참고 : 윈도우시스템에서 영역설정시 shift글쇠를 누르고 영역 설정을 하면 정각형이 선택됩니다. 다 아시죠.)에서 누르미 왼쪽 단추를 누르며 끌기를 하세요. 물론 좌표를 따려면 시작점은 기억해 두어야 하지요. 적당한 영역이 설정되었으면 다음 info팔레트에서 3번을 봅니다. 원의 폭과 높이 수치가 나오지요. 이미지맵의 원선택시 필요한 것은 이 시작점과 원의 반지름입니다. 따라서 '<area shape="circle" coords="58,50,162" 와 같은 식으로 적어주면 됩니다. 다각형일 때는 시작점부터 마침점까지의 좌표를 차례차례로 기술해주면 됩니다(시계방향으로~~)