영무의 HTML교실

1.13 이미지 맵을 만들어봐요. 28

1.13  Image Map을 만들어봐요.

   전라남도 보성군 율어면 유신리에 다녀왔답니다. 그 곳 사람들이 버든이라고 부르는 곳이랍니다. 시냇가에서 노느라고 온 몸이 새까맣게 타다 못해 삶은 문어처럼 빨갛게 익어 버렸어요. 물이 맑아서 피라미를 비롯한 물고기들이 많이 서식하고 있는 곳이랍니다. 저수지에서 낚시로 손바닥만한 붕어도 몇 마리 잡았답니다. 팔뚝만한 잉어들이 헤엄치는 것을 보고 낚시를 시작했는데, 이틀동안 잉어들 구경만 했지 잡지는 못했답니다.

1.13.1  Image Map

   이미지 맵이란 하나의 이미지를 몇 개의 영역으로 분할해서 분할된 각 영역마다 각각 다른 링크를 걸 수 있게하는 태그입니다. 아마 웹써핑을 하면서 몇 번 보셨을 거예요. 자주 사용되고 별로 어렵지도 않은 태그인데, 제가 게을러서 이제야 강좌를 추가하게 되네요. 사실 저도 이미지 맵 태그를 자세하게 공부하는 것은 지금이 처음이랍니다. ^-^;

[Image Map]
<map></map>: 하나의 이미지를 몇 개의 영역으로 분할해서 분할된 각 영역마다 각각 다른 링크를 걸 수 있게하는 태그입니다.

<html>
<body>
<img src="http://moocta.byus.net/loveletter1.bmp" usemap="#love">
<map name="love">
<area shape="rect/circle/poly/default" coords="62, 47, 40" href="http://kr.yahoo.com" target="_blank/_top">

</map>
</body>
</html>

ㆍusemap은 이미지 맵의 이름을 지정하는 속성입니다. 큰따옴표의 안에 아무 이름이나 입력하시면 됩니다. 반드시 이름의 앞에 #을 붙여주어야 합니다. 가급적 영어 소문자로 해 주시기 바랍니다. 웹(Web)문서의 파일명을 만들 때와 같이, 한글로 해 놓으면 브라우저가 가끔 인식을 못하는 경우가 있기 때문입니다.

ㆍname은 앞에서 지정했던 이미지 맵의 이름을 불러오는 속성입니다. 큰따옴표의 안에 앞에서 지정했던 이미지 맵의 이름을 #없이 입력하시면 됩니다. love는 제가 임의로 지정한 이름입니다.

ㆍshape는 분할된 각 영역의 모양을 지정하는 속성입니다. 큰따옴표의 안에 rect, circle, poly, default를 입력하여 분할된 각 영역의 모양을 지정할 수 있습니다. rect를 입력하시면 사각형, circle은 원형, poly는 다각형, default는 기본형으로 모양을 지정하실 수 있습니다.

ㆍcoords는 앞에서 지정했던 각 영역의 모양을 이미지 맵에서의 좌표값을 입력하여 구체적으로 지정하는 속성입니다. 큰따옴표의 안에 각 영역의 좌표값을 구하여 입력하시면 됩니다. 좌표값을 입력하는 방법은 영역의 모양에 따라 각기 다르답니다.

   사각형 모양은 2쌍의 좌표값을 가지게 됩니다. 사각형 왼쪽 상단 꼭지점의 좌표값 x1, y1과 오른쪽 하단 꼭지점의 좌표값 x2, y2의 좌표값을 적어주시면 되겠습니다.
                    예) <area shape="rect" coords="x1, y1, x2, y2">

   원형 이미지 맵의 좌표값은 3개의 값을 가지게 됩니다. 원의 중심 좌표값 x1, y1과 원의 반지름 R값을 적어주시면 되겠습니다.
                    예) <area shape="circle" coords="x1,y1,R">

   다각형 이미지 맵의 좌표값은 꼭지점 개수의 두배수랍니다. 위의 이미지는 5각형입니다. 그러므로 좌표값은 10개가 필요하게 됩니다. x1, y1, x2, y2,..., x5, y5까지의 좌표값을 적어주시면 되겠습니다.
                    예) <area shape="poly" coords="x1, y1, x2, y2, x3, y3, x4, y4, x5, y5">

예제 1 Image Map

<html>
<body>
<img src="http://moocta.byus.net/loveletter1.bmp" usemap="#love" border="0">
   <map name="love">
        <area shape="circle" coords="222, 75, 75" href="http://www.yahoo.co.kr">
        <area shape="rect" coords="125, 135, 174, 178" href="http://www.empas.com">
   </map><br>
그림속 남정네의 노란부분으로 표시된 부분을 클릭해 보세요. 각각 다른 곳으로 링크를 하였답니다.
</body>
</html>

   태그연습장을 사용하여 예제 1의 결과를 확인해 보세요.

   정확한 좌표값을 구하는데 가장 손쉬운 방법은 그림판을 이용하는 방법입니다. 그림판은 시작→프로그램(P)→보조프로그램→그림판을 통해서 실행시키실 수 있습니다. 먼저, 그림판에서 파일(F)→열기(O)로 이미지 맵을 하려는 이미지를 불러옵니다. 그다음 불러온 이미지 위의 아무 곳에다가 마우스 포인터를 올려보세요. 그러면 아래의 <그림 1-5>와 같이 현재 마우스 지점에 대한 x, y의 좌표값이 그림판의 하단에 나타나게 된답니다.

<그림 1-7 그림판을 이용하여 좌표값 구하기>

이미지 맵을 잘만 활용하신다면, 홈페이지의 메뉴를 만드는데에 있어서 매우 유용하게 사용하실 수가 있답니다. 제 홈페이지 BBS(게시판)의 메뉴도 이미지 맵을 사용하여 만들었는데요, 그림판으로 메뉴로 사용할 이미지를 그려 넣은 후에 각 부분별로 링크를 걸어 놓은 것이랍니다. HTML 강좌의 메뉴와 같이 테이블로 일일이 나누어 메뉴를 만드는 방법보다는 신경을 덜 쓰고 간편하게 메뉴를 만들 수가 있답니다. 앗, 그렇다고 테이블로 일일이 나누어 메뉴를 만드는 방법이 이미지 맵을 사용하여 메뉴를 만드는 방법보다 꼬졌다는 것은 아니예요. 각각의 장단점이 있는 거지요. 여러분께서는 제 생각에 개의치 마시구, 마음에 드는 방법으로 메뉴를 만들도록 하세요.