프로그래밍/HTML5

html 이미지맵(map 태그) 하나의 이미지에 여러 개(멀티)의 링크 걸기

콘파냐 2017. 12. 4. 19:48
반응형

텍스트나 이미지에 링크를 거는 방법은 a  태그를 사용하면 된다. 텍스트에 링크를 걸려면 a 태그로 해당 텍스트를 감싸주면 되고 이미지에 링크를 걸려면 a 태그로 이미지 태그를 감싸주면 된다. 

그런데 인터넷 속도가 빨라지면서 사이트의 메인이나 페이지의 대부분을 이미지로 만들어서 여기에 멀티 링크를 거는 경우가 있다. 이게 바로 이미지 맵을 이용한 것인데 이미지 맵을 이용하면 링크를 걸 이미지들을 쪼갤 필요없이 하나의 통짜 이미지를 사용할 수 있다. 

이미지맵, 말은 거창한 듯 하지만 단순히 map이라는 태그를 사용한다.

map 태그는 이미지 맵을 만드는 태그며 원본 이미지를 표시하는 img 태그와 별도로 작성한다. 그리고 img 태그에서 사용할 map 태그의 이름을 지정하면 된다.

이런 컨셉을 간단히 그림으로 나타내면 다음과 같다.

위 그림은 이미지 맵을 사용하는 큰 그림이다.  map 태그로 이미지 맵을 만든 후 img 태그 내에서 usemap 속성에 사용할 map 의 이름(name)을 지정해준다.(이름 앞에 # 붙일 것)

-안읽어도 됨-

마치 포토샵에서 이미지 위에 채널을 얻어 놓는 것이라 생각해도 될 것이다. 동적인 페이지에서는 이미지 맵을 조건에 따라서 변경할 수도 있겠다.

이제 map 태그의 사용 방법을 알아보도록 하자.

map 태그 완성하기 

지도(map)는 좌표에 따라 그려진다. 이미지 맵 역시 마찬가지로 좌표값이 필요하다. 쉽게 말해서 우리가 링크를 걸려는 부분의 좌표값이 필요한데 사용할 이미지의 좌상단 꼭지점의 좌표를 (0, 0)으로 해서 다음과 같이 링크를 걸 부분의 좌표를 구한다.

위 그림처럼 좌표 상에서 두 쌍의 (x좌표, y 좌표)로 사각형을 나타낼 수 있다. 따라서 (a,b)와 (c,d)로 이미지 상에서 사각형 모양의 부분을 나타낼 수 있으며 이 부분에 링크를 걸 수 있다.

이 그림에 대한 대략적인 코드는 다음과 같다.

area 태그 속성

shape : default, rect, circle, poly 를 정할 수 있다. 위 그림은 rect로 사각형을 의미한다. default는 이미지 전체를 의미한다. circle을 지정하면 coords에 원의 중심 좌표, 반지름의 크기를 지정하면 된다. poly는 다각형이다.

coords : 좌표점을 의미하며 pixel 단위다.

href : 이미지 해당 부분의 링크 주소를 적어준다.

이 밖에도 이미지 태그의 속성 alt, title 속성도 사용가능하다.

이미지의 좌표 알아 내는 방법

가장 간단한 방법으로 윈도우 그림판을 가지고 좌표를 알아내는 방법이 있다. 또는 이 사이트를 이용하는 방법도 있고 방법은 다양하다.

이번 내용은 쉽게 이해할 수 있는 내용이라 애써 예제를 만들지는 않았다. 

반응형