HTML 사진에 링크를 거는 이미지맵 (area, map 태그) 설정 방법

이번 시간은 참으로 사용하기 용이한 이미지맵에 대해서 알아보겠습니다. 이 방법은 네이버 블로그에서 많이 사용합니다. 네이버 블로그를 사용하시는 분들 중에서는 위젯 곳곳에 링크를 걸어두신 분들이 제법 많이 계십니다. 대체 이건 어떻게 하는걸까 궁금하셨던 분들은 이번 강좌를 꼭 눈여겨 봐주시기 바랍니다.

이미지맵이란 말 그대로 커다란 이미지 안에서 투명한 가상의 레이어를 만들어 그곳에 링크를 거는 방법 입니다. 우선 준비물은 사용하고자 하는 이미지가 필요합니다. 그리고 HTML 태그 중, AREA 그리고 MAP 태그를 사용해서 원하는 좌표에 넘어가고자 하는 인터넷 주소를 입력해서 사용하게 됩니다. 그러면 구체적으로 어떻게 하는지 알아보겠습니다.

우선 이미지는 이것으로 사용해 보겠습니다. 웹 접근성 연구소 홈페이지의 화면입니다. 여기에서 다음의 세 곳에 이미지맵을 적용시켜 보려고 합니다. 하나는 사각형, 그리고 다각형, 마지막으로 원 형태 입니다.

먼저, 기본 태그 형태를 알아보겠습니다. 이미지 태그를 먼저 적용해 주시고, 이미지 태그에 속성 하나를 더 추가합니다. usemap="#■" 이것만 추가하시면 됩니다. 해당 이미지에 #■ 값을 가진 유즈맵을 적용시키겠다는 뜻 입니다. 그러면 어떤 속성을 가진 #이름인지 지정해줘야 하므로, 해당되는 태그를 바로 밑에 저기 빨간색 상자에 적힌 것처럼 적용시켜 줘야 합니다.

그리고 map name 안쪽에도 모두 같은 이름으로 넣어주셔야 합니다. 그리고 ★에는 다음의 속성값이 들어갑니다.

shape = rect / circle / poly 세 가지 중 하나를 넣어줍니다. rect는 사각형, circle은 원형, poly는 다각형 입니다.

coords = 좌표 입니다. 숫자로 이루어지며 이 부분은 밑에서 다시한번 설명드리겠습니다.

href = 누르면 이동되는 링크 주소를 넣어주시면 됩니다.

rect 사용 방법

먼저 rect를 알아보겠습니다. 사각형 형태의 좌표이며 좌측 상단의 x1, y1 값을 먼저 입력하고, 우측 하단의 x2, y2의 좌표값을 coords 에 입력하면 됩니다. 좌표값은 바로 픽셀의 위치와 동일합니다. 그러면 이 좌표값을 구하는게 먼저겠죠?

요즘은 사이트가 워낙 좋은곳이 많아서 이미지만 업로드 하면 원하는 위치의 좌표값을 쉽게 얻을 수 있는곳이 늘어났는데, 여기에서는 가장 원초적인 방법으로 알아보겠습니다. 원리를 알아야 나중에 사이트 없이도 좌표값을 얻을 수 있으니까요.

좌표값을 얻기 위해서는 포토샵을 사용해야 합니다. 해당 이미지를 먼저 열어주세요. 저는 저기 녹색 네모칸 부분에 한번 이미지맵을 걸어보겠습니다.

포토샵의 Window > Info 로 들어가주세요. 단축키는 F8 입니다. 그러면 인포창이 하나 뜰 것입니다.

그리고 정확한 좌표를 얻기 위해서 자를 띄워주세요. 단축키는 Ctrl + R 입니다. 화면에 나타나면 저기 빨간색으로 표시된 부분을 더블클릭 합니다. 그래야 이미지의 왼쪽 모서리 부분부터 정확히 인식하게 됩니다.

자에서 마우스 오른쪽 버튼을 눌러서 단위를 Pixels 로 변경합니다.

포토샵에서 사각형 선택 툴을 선택합니다.

그리고 마우스로 저 위치로 가져다 놓습니다. 그냥 마우스만 갖다놓으면 인포창에 X, Y 값이 출력됩니다. 바로 우리가 원하는 좌표값이 이것입니다.

이번에는 이쪽으로 위치한 뒤에 XY값을 적어두세요. 그리고 그대로 coords 에 입력합니다.

그러면 이렇게 되겠죠? 저는 편하게 보시라고 한줄씩 코드를 내려썼는데, 여러분들께서는 그냥 일렬로 쭈욱 작성하시면 됩니다. 클릭시 이동하는 웹페이지는 구글로 해봤습니다.

그리고 한번 결과를 확인해 보세요. 정상적이라면 이렇게 손가락 모양으로 변하는 것을 알 수 있습니다. 클릭해보시면 구글 홈페이지가 새 창으로 뜨는것도 확인하실 수 있을것입니다.

circle 사용 방법

다음은 circle로 이미지맵을 적용하는 방법입니다. 여기서 필요한것은 바로 원의 중심점 좌표(x1,y1)를 알아야 하며, 이 원의 반지름(r)만 알면 됩니다. 마찬가지로 포토샵에서 확인이 가능합니다.

먼저 포토샵에서 마법봉 툴을 선택합니다. 포토샵 능숙자시라면 꼭 이 방법으로 안 하셔도 됩니다.

그리고 원형 이미지맵을 넣고자 하는 공간을 마법봉 선택툴로 선택 하시고, Ctrl + T 를 누르시면 선택된 부분을 트랜스폼 할 수 있는 네모 모양의 가이드가 생깁니다. 여기에서 반지름 값을 얻을 수 있는데, 인포창에 보시면 W, H에 대한 수치가 나오는게 보이실 겁니다. 이것이 이 원의 지름인 샘 입니다. 예시에서는 88이라고 나왔으므로, 여기에서는 44로 입력하시면 됩니다. (전 43으로 입력했습니다. 1px 정도의 오차는 상관 없습니다.)

이제 가운데 중심의 좌표값을 얻어야 합니다. 자 모양의 UI에서 마우스로 가로로 드래그 한번, 세로로 드래그를 한번 해보시면 저렇게 하늘색의 가이드 모양이 나오는데 이것을 중심에 크로스 하도록 둡니다. 그리고 사각형 가이드 모양을 없애기 위해서 엔터를 누르시고 Ctrl + D 하셔서 선택 영역을 없앱니다. 이제 사각형 선택툴로 바꾸셔서 아까 위에서 했던 방법대로 가운데 부분으로 가져다 놓으시면 인포창에 X,Y 값을 얻을 수 있습니다.