모바일 사용이 늘면서 어떤 화면 크기에서도 이미지 크기가 일정 비율로 보여야 했다.
화면 크기에 따라 변화하는 이미지의 특정 영역에 링크 삽입하는 방법은 무엇이 있을까.
📍 Image Map
html을 처음 배운 사람이라면 정석대로 생각할 방법이다.
하지만 coords는 map을 기준으로 고정되어있기에 화면 변화에 대응하지 못한다.
이러한 문제를 해결하기 위한 라이브러리 rwdImageMaps.js.
map이 연결된 이미지의 크기에 따라 coords가 동적으로 변한다. (대박이다. 개발자 만세)
https://github.com/stowball/jQuery-rwdImageMaps
readme를 읽고 그대로 하면 된다.
🥠 a tag, div를 퍼센트로 배치
div에 이미지와 a tag를 함께 넣어 a tag는 position: absolute로 영역에서 제외하면, div의 크기는 이미지의 크기가 될 것이다.
div가 relative임으로 기준을 잡고 width, height, top, left를 퍼센트로 잡으면 사이즈를 수정해도 동일한 영역에 a tag가 위치한다.
onclick이 필요한 경우 div로도 동일하게 구현 가능하다.
.img_wrap {
position: relative;
max-width: 1000px;
}
.img_wrap > .btn01 {
position: absolute;
display: block;
width: 41%;
height: 12%;
top: 69.5%;
left: 29.5%;
}
✂️ 이미지를 잘라서 배치
이미지를 잘라야 한다는 번거로움이 있지만, 가장 원초적인 방법이라고 할 수 있다.
한 개로 끝낼 수 있는 이미지를 여러 개로 잘라서 올리기에 리소스 차원에서도 효율적이라 할 수 없다.
추천하지 않는 방법.
이렇게 이미지를 잘라서 아래 img를 a tag로 묶어서 링크를 준다.
이렇게 하면 [이벤트 참여하기] 버튼이 아니라 그 주위를 눌러도 링크가 이동한다.
디자이너의 의도를 파악한 구현이라고 보기 어렵다.