이미지맵이란
쇼핑몰 프로모션에서 주로 사용하는 기능으로 여러개의 구역으로 나누어 링크를 거는것을 말합니다.
* 아래 이미지와 같이 전체적인 디자인 부분 중 특정영역(노랑)을 클릭 시 외부 링크로 이동할 경우 사용합니다.
1. 이미지 맵을 적용하고자 하는 이미지를 HTML 태그로 준비합니다.
<img src="이미지경로" alt="">
2. 이미지맵을 작성하기 전 이미지맵 태그(area)와 이미지태그(img)을 연결할 이름을 지정합니다.
* img태그에 작성하는 이미지맵이름은 앞에 # 기호를 반드시 붙여야합니다.
* 선정한 이미지맵명을 map name에도 동일하게 작성합니다. # 기호 없이!
<img src="이미지경로" alt="" usemap="#이미지맵">
<map name="이미지맵"></map>
3. map 태그 내부에 이미지맵 영역을 설정할 area 태그를 추가로 입력합니다.
- shape = rect(사각형) circle(원형) poly(다각형) 3가지 중 하나의 선택영역 모양을 설정합니다.
- coords = 시작점x 시작점y 끝점x 끝점y 순서로 선택영역의 기준점 좌표를 설정합니다.
- href = 이동되는 외부 링크 주소를 입력합니다.(절대경로/상대경로)
- alt = 이미지맵의 설명문을 작성합니다.(바로가기 링크에 해당하는 정보)
- target = 클릭 시 이동되는 인터넷 창을 설정합니다. _blank(새창)
<img src="이미지경로" alt="" usemap="#이미지맵">
<map name="이미지맵">
<area shape="" coords="" href="" alt="" target="">
</map>
4. 위 coords 작성 시 아래 사이트를 이용하시면 됩니다.(사용법은 아래 이어서)
http://maschek.hu/imagemap/imgmap/
maschek.hu - Online Image Map Editor
maschek.hu
4-1. 이미지맵을 확인할 이미지를 가져옵니다.
4-2. Upload를 클릭하여 해당 이미지를 서버로 업로드합니다.
4-3. accept 을 클릭하여 이미지가 표시되게 하고 아래 zoom 25, 50, 100% 중 원하는 보기모드를 설정합니다.
4-4. 선택하고자 하는 부분을 클릭 앤 드래그하여 그린 후 위 coords 값을 복사합니다.
4-5. 확인한 코드 값을 HTML 태그에 붙여넣기합니다.
<img src="이미지경로" alt="" usemap="#이미지맵">
<map name="이미지맵">
<area shape="" coords="코드붙여넣기위치" href="" alt="" target="">
</map>
4-6. 파일을 실행해보시면 위에서 설정한 영역 부분만 링크가 적용된 것을 확인할 수 있습니다.
See the Pen HTML-image-map by yuna122212 (@yuna122212) on CodePen.
반응형 이미지맵(Responsive image map) + CSS, JQuery
* 화면 너비 조정 시 프로모션 이미지가 가변형으로 변경되는게 필요하다면 아래 스크립트가 필요합니다.
* 아래 css와 jquery 위치를 그대로 복사 붙여넣기하여 해당되는 html에 적용하세요.
1. 이미지 맵 적용 이미지 대상에 너비를 가변형 100%으로 설정합니다.
img {width:100%}
2. head 안 또는 body 태그 안 마지막 자식 위치에 아래 스크립트 태그를 그대로 복사해서 붙여넣기합니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
<script>
$('img[usemap]').rwdImageMaps()
</script>
3. 화면을 실행해보고 웹 브라우저 너비를 조절해보면 가변형 이미지가 된 것을 확인할 수 있고 크기가 조절되는 이미지에 따라 이미지맵도 함께 작아지며 설정한 링크 영역이 선택되는 것을 볼 수 있습니다.