홈페이지 제작, 이미지맵(map태그) 설정하기

홈페이지 제작, 이미지맵(map태그) 설정하기

이미지맵 태그는 하나의 이미지에 여러개의 링크를 걸 수 있습니다.

링크형태로는 3가지 유형이 존재하는데, 사각형(rect), 원(circle), 다각형(poly)의 링크영역을 지정하여야 합니다.

링크영역을 지정하기 위해서는 좌표값을 알아야 합니다.

이 좌표값은 어느 영역에 마우스포인터가 위치하면 링크로 연결할 것인가를 지정해주는 범위값인데, 드림위버같은 제작프로그램에서는 쉽게 이미지맵을 생성할 수 있습니다.

홈페이지 제작프로그램이 없다면 알씨같은 이미지뷰어를 사용하여 좌표값을 확인할 수 있는데요.

알씨에서 해당이미지를 열고 이미지맵을 설정할 영역에 마우스를 위치시키면 좌표값이 하단에 나타납니다.

앞서 설명한것처럼 사각형, 원형, 다각형의 영역을 설정할수 있는 만큼, 구해야 하는 좌표값도 다릅니다.

사각형의 경우 좌측상단과 우측하단 좌표를 구해야 하고,

원형은 중심점과 반지름(반지름은 원의 가로픽셀에서 반을 나누면 됩니다.)

다각형은 모든 포인트의 좌표값를 구해야 합니다.

입력방식은 body 태그안에 usemap을 사용하여 이름을 지정해주고, 이미지맵 형태와 좌표값을 지정해주면 됩니다.

사각형 이미지맵

<body>

</map>

</body>

원 이미지맵

<body>

</map>

</body>

다각형 이미지맵

<body>

</map>

</body>

불친절한 파파엘 Life