이미지맵 편하게 만들기
특정 영역에 링크를 걸고 싶을 때
웹사이트를 만들거나 뉴스레터를 만들 때, 게시판에 글을 쓸 때 링크를 걸고 싶은데 특정 영역에만 링크를 걸어야 할 때가 있습니다. 이럴 경우 포토샵에서 이미지를 잘라서 각각의 이미지에 걸어주는 방법도 있지만 전문가가 아니라면 이런 작업이 참 어려운 작업인데요.
다른 방법으로 이미지맵을 이용하는 방법이 있습니다. 이미지맵은 이름 그대로 이름에서 어떤 영역을 좌표화하여 해당 좌표에 링크를 거는 방식입니다. 이 이미지맵도 마찬가지로 전문적인 영역이라 HTML을 어느 정도는 할 줄 알아야 하고 사실 좀 번거로운 작업이기도 합니다.
소개해드리려는 서비스는 이 작업을 아주 간편하게 할 수 있도록 해주는 서비스로, Image Map Generator라는 서비스입니다.
이 사이트에 들어가면 바로 아래와 같은 이미지가 나옵니다.
보시는 바와 같이 PC에 있는 이미지 또는 웹사이트로부터의 이미지를 넣으라고 하는데요. 저는 보통 호스팅한 서버에 올려두고 해당 주소를 가져옵니다. 어차피 웹사이트에 올리거나 뉴스레터를 보내거나 해도 서버에 있어야 하기 때문에 PC에서 가져오면 다시 주소를 바꾸는 작업을 해야 하니까요.
1. 이미지 링크 넣는 창 열기
Load Image from Website를 클릭하시면 아래와 같이 이미지의 링크를 넣는 창이 나옵니다.
2. 이미지 주소 입력하여 이미지 끌어오기
이 창에 이미지 주소를 입력하고 Continue를 눌러주면 아래와 같이 해당 이미지가 바로 보이십니다.
3. 링크 걸 준비
이렇게 나오면 이제 Active로 시작하는 테이블에서 좌표를 만들기 시작하면 됩니다. 지정하고자 하는 영역이 사각형이 Rect를 선택하고 Link 부분에 링크를 걸고자 하는 사이트 주소를 넣어주세요. 그리고 Title과 Target을 설정해주시면 됩니다. HTML을 잘 모르시는 분들을 위해 보통 새창으로 열려면 _blank를, 현재 창에 바로 열리게 하려면 _self를 선택하시면 됩니다.
4. 링크 영역 잡기
그런 후 가장 중요한 작업인 링크 걸 영역을 선택하는 작업입니다. 사각형 기준으로는 가장 좌측 상단 점을 누른 후 가장 우측 하단 점을 누른다고 생각하시면 됩니다. 아래 이미지의 '지심' 부분을 잡은 곳을 보시면 이해가 빠르실 거예요.
5. 추가로 링크 걸 영역 설정
추가로 링크를 걸 영역이 있으시다면 Add New Area를 클릭하셔서 계속 추가를 하시면 됩니다. 4-5번을 반복하시면 됩니다.
6. 코드 복사
이렇게 해서 링크를 모두 만들고 난 후 'Show Me the Code!' 버튼을 클릭하시면 아래와 같이 코드가 생성됩니다.
7. 복사한 코드 필요한 곳에 붙여 넣기 - 완료
이렇게 복사한 코드를 필요한 곳에 붙여 넣기 하시면 모든 작업은 완료됩니다.
하나하나 풀었으니 7번까지 나오지만 사실 해보면 굉장히 간단한 작업을 통해 이미지맵을 만들 수 있습니다.
복잡한 작업인데, 아주 간단하게 진행할 수 있으니 한번 시도해보세요~!
