[개발지식공유] jQuery-rwdImageMaps

[해당 플러그인을 사용하고자 한 배경]
이벤트나 기획페이지를 제작하는 방식이 bo에서 html 편집기 내에서 이미지에 링크를 달아서 업로드를 했다. 

해당 요소를 매번 className/id 로 찝거나 이미지를 잘라서 받아와서 일을 했다. 

중요도에 비해 공수가 컸기 때문에, 해당 플러그인을 사용해서 단순한 이미지의 경우에는 운영팀에서 스스로 이벤트 페이지를 운영할 수 있도록 만들고자 했다.

1. 유명한 이미지 map 관련 플러그인

• jQuery-rwdImageMaps
  • useMap 플러그 인 중에서는 굉장히 유명한 플러그인
  • 단점: 4년전 업데이트로 최신 업데이트가 되지 않음

2. 사용하려고 생각했던 방법

   (1) jquery와 rwd image maps 플러그인을 script 태그로 이벤트 페이지 head에 넣는다.

   (2) 그리고 데이터를 json 파일로 만들어서 내려주려고 함

   {/*{router.query?.serialnumber === '14' && (*/}
               {/*  <>*/}
               {/*<img*/}
               {/*  style={{ width: '100%', height: '100%' }}*/}
               {/*  alt={promotionDummy?.alt}*/}
               {/*  src={promotionDummy?.src}*/}
               {/*  useMap="#image-map"*/}
               {/*/>*/}
               {/*<map name="image-map">*/}
               {/*  {promotionDummy?.mapList?.map((list) => (*/}
               {/*    <area*/}
               {/*      key={list?.id}*/}
               {/*      target="_blank"*/}
               {/*      alt={list?.alt}*/}
               {/*      title={list?.title}*/}
               {/*      href={list?.href}*/}
               {/*      coords={list?.coords}*/}
               {/*      shape="rect"*/}
               {/*    />))*/}
               {/*  }*/}
               {/*</map>*/} 

• 단점: 그때그때 구분자를 넣어줘야하고, json 파일 형식을 넣을 수 있도록 구조를 bo에 만들어야 해서 공수가 많이 듦

3. 해결

   (1) img 태그 내에 onload 속성을 사용해서 img가 렌더링 된 후에 onload 내에 넣은 함수가 실행되도록 만들었다.

   <img src="" usemap="#image-map" onload="$(this).rwdImageMaps();"> 

• 여기서 this는 img[usemap]을 지칭한다.

(1) onload 함수

onload? window.onload는 함수를 오버라이딩(재정의) 해주는 함수이다. 함수 내의 코드 스크립트를 브라우저내의 모든 요소가 준비 되어야 실행되도록 할 수 있다.

(2) image.onload event in HTML

image 내 onload 속성은 이미지 로드가 성공적으로 된 뒤에 script를 실행시킨다.