인벤 스크립트에 관심을 가져주셔서 감사합니다.

올려주신 내용들을 바탕으로 작성한 소스를 전달드립니다.

기존에 문의하신 내용은, 탭의 내용이 전부 바뀌는 것을 가정하고 제작된데 반해,
올려주신 내용은 오직 배경 이미지(CSS)만 수정되면 되어서,
data-inven-click-css를 이용해서 단순하게 원하시는 형태를 구현할 수 있었습니다.

혹시 원하시던 형태와 다르거나, 이외에도 궁금하신 내용은 언제든지 글 남겨주세요.

감사합니다.


■ 작동 샘플

각종 버튼 및 기능이 삽입되는 영역이 될 것입니다.



■ 소스 샘플 - HTML을 누른 상태에서 붙여넣어 주세요.

<!-- 전체 배경-->
<div data-inven-id="la_back" style="display: inline-block; width:453px; height:640px;background: url('http://upload2.inven.co.kr/upload/2018/03/12/bbs/i15536735600.png')no-repeat 0 0/ 100%; color: #fbb2ab; border: 1px solid #fbb2ab;">

<!-- 부관 선택 버튼 -->
<div style='background: url("http://upload2.inven.co.kr/upload/2018/03/12/bbs/i15165334894.png"); width: 93px; height: 93px; overflow: hidden; display: inline-block; cursor: pointer;margin:7px 17px;' data-inven-tooltip="#000000;#ffffff;부관교체" data-inven-toggle="aide"></div>


<!-- 부관 선택 팝업, 팝업 위치는 바로 아래행의 마진 값을 조정해 주세요.-->
<div style="height:1px;overflow:show;margin-left:51px;margin-top:40px;">

<div style="display: none;overflow:hidden;border-radius: 6px; border: 1px solid #fbb2ab; width: 350px; height: 350px;"data-inven-id="aide">
<div style='padding: 5px 12px; background-image: url("http://upload2.inven.co.kr/upload/2018/03/12/bbs/i13953753866.png"); width: 326px;overflow-y: scroll;height: 340px;' >

<!--
양식에 유의해 주세요. 따옴표를 잘못 삽입할 경우 오류가 발생할 수 있습니다.
<img src="부관 버튼 수소" data-inven-click-css="{'la_back':{'background':'url(부관 배경 이미지 주소)no-repeat 0 0 / 100%'}}">
-->

<img src="http://upload2.inven.co.kr/upload/2018/03/12/bbs/i15333964945.png" data-inven-click-css="{'la_back':{'background':'url(http://upload2.inven.co.kr/upload/2018/03/12/bbs/i15536735600.png)no-repeat 0 0 / 100%'}}">
<img src="http://upload2.inven.co.kr/upload/2018/03/12/bbs/i15364481370.png" data-inven-click-css="{'la_back':{'background':'url(http://upload2.inven.co.kr/upload/2018/03/12/bbs/i14317311222.png)no-repeat 0 0 / 100%'}}">
<img src="http://upload2.inven.co.kr/upload/2018/03/12/bbs/i15393100295.png" data-inven-click-css="{'la_back':{'background':'url(http://upload2.inven.co.kr/upload/2018/03/12/bbs/i15225782208.png)no-repeat 0 0 / 100%'}}">
<img src="http://upload2.inven.co.kr/upload/2018/03/12/bbs/i15333964945.png" data-inven-click-css="{'la_back':{'background':'url(http://upload2.inven.co.kr/upload/2018/03/12/bbs/i15536735600.png)no-repeat 0 0 / 100%'}}">
<img src="http://upload2.inven.co.kr/upload/2018/03/12/bbs/i15364481370.png" data-inven-click-css="{'la_back':{'background':'url(http://upload2.inven.co.kr/upload/2018/03/12/bbs/i14317311222.png)no-repeat 0 0 / 100%'}}">
<img src="http://upload2.inven.co.kr/upload/2018/03/12/bbs/i15393100295.png" data-inven-click-css="{'la_back':{'background':'url(http://upload2.inven.co.kr/upload/2018/03/12/bbs/i15225782208.png)no-repeat 0 0 / 100%'}}">

</div></div></div>

<!-- 하단 영역 위치 조정 영역, height 뒤의 값을 조정해서 아래 버튼의 위치를 조정하세요.-->
<div style="height:400px;">
</div>


<!-- 하단 영역, 영역 확인을 돕기 위해 위해 배경 색상을 넣어 놨습니다. 향후 지워 주시면 됩니다. -->
<div style="padding:10px;margin:10px 20px;background-color:rgba(255,0,255,0.3);width:383px; height:40px;index-z:">
각종 버튼 및 기능이 삽입되는 영역이 될 것입니다.
</div>
</div>



■ data-inven-click-css 관련 참고

http://www.inven.co.kr/board/webzine/4712/2#107


■ 스크롤 관련 참고

http://www.inven.co.kr/board/webzine/4712/2349?iskin=webzine