태그 보관물: 이미지

이미지 맵 링크 만들기

허브트리 로고

이미지의 특정 영역을 클릭하면 원하는 주소로 연결(링크)시키기 위해서는 이미지 맵 링크를 만들어줘야 한다.
이미지에 맵 링크를 만들때는 보통 디자이너가 작업을 해서 함께 넘겨주지만 그렇지 않고 개발자에게 작업을 해달라고 요청하는 경우도 있다.

이미지 맵 링크 표기 방법

이미지 맵 링크 표기 태그

  • img : 이미지 파일을 표기하는 태그
  • map : 이미지의 맵 이름에 맞춰서 맵 링크를 그룹지어주는 태그
    • area : 맵 링크에 대해서 설정하는 태그

이미지 맵 형태

이미지 맵을 지정하는 영역을 표현하는 방법에는 3가지의 방식이 존재를 한다.

사각형

이미지 맵을 지정하는 영역의 모양이 사각형일 경우, 속성 shape에 ‘rect’를 지정하여 좌측 상단의 좌표와 우측 하단의 좌표를 지정하여 사각형을 표현

원형

이미지 맵을 지정하는 영역의 모양이 원형일 경우, 속성 shape에 ‘circle’를 지정하여 원 중심의 좌표와 반지름을 지정하여 원형을 표현

다각형(자유형)

이미지 맵을 지정하는 영역의 모양이 다각형일 경우, 속성 shape에 ‘ploy’를 지정하여 다각형의 꼭지점들을 지정하여 표현