이미지 맵 링크 만들기

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

이미지 맵 링크 표기 방법

이미지 맵 링크 표기 태그

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

<img decoding="async" src="{이미지 파일 경로}" usermap="#{맵 이름}">
<map name="{맵 이름}">
    <area shape="{맵 형태}" coords="{좌표값}" href="{링크}" target="{창을 띄우는 방법}">
</map>

이미지 맵 형태

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

사각형

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

<area shape="rect" coords="{좌측상단 X축 좌표}, {좌측상단 Y축 좌표}, {우측하단 X축 좌표}, {우측하단 Y축 좌표}" href="{링크주소}">

원형

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

<area shape="circle" coords="{원 중심의 X축 좌표}, {원 중심의 Y축 좌표}, {우측하단 X축 좌표}, {우측하단 Y축 좌표}" href="{링크주소}">

다각형(자유형)

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

<area shape="poly" coords="{꼭지점1 X축 좌표}, {꼭지점1 Y축 좌표}, {꼭지점2 X축 좌표}, {꼭지점2 Y축 좌표}, {꼭지점3 X축 좌표}, {꼭지점3 Y축 좌표}, {꼭지점4 X축 좌표}, {꼭지점4 Y축 좌표}, {꼭지점5 X축 좌표}, {꼭지점5 Y축 좌표}" href="{링크주소}">