[기타] '꽃별'님이 문의하신 스크립트 입니다.

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

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

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

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

감사합니다.


■ 작동 샘플

---

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

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

---

<!-- 전체 배경-->
<div data-inven-id="la_back" style="display: inline-block; width:453px; height:640px;background: url('https://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("https://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("https://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="https://upload2.inven.co.kr/upload/2018/03/12/bbs/i15333964945.png" data-inven-click-css="{'la_back':{'background':'url(https://upload2.inven.co.kr/upload/2018/03/12/bbs/i15536735600.png)no-repeat 0 0 / 100%'}}">
<img src="https://upload2.inven.co.kr/upload/2018/03/12/bbs/i15364481370.png" data-inven-click-css="{'la_back':{'background':'url(https://upload2.inven.co.kr/upload/2018/03/12/bbs/i14317311222.png)no-repeat 0 0 / 100%'}}">
<img src="https://upload2.inven.co.kr/upload/2018/03/12/bbs/i15393100295.png" data-inven-click-css="{'la_back':{'background':'url(https://upload2.inven.co.kr/upload/2018/03/12/bbs/i15225782208.png)no-repeat 0 0 / 100%'}}">
<img src="https://upload2.inven.co.kr/upload/2018/03/12/bbs/i15333964945.png" data-inven-click-css="{'la_back':{'background':'url(https://upload2.inven.co.kr/upload/2018/03/12/bbs/i15536735600.png)no-repeat 0 0 / 100%'}}">
<img src="https://upload2.inven.co.kr/upload/2018/03/12/bbs/i15364481370.png" data-inven-click-css="{'la_back':{'background':'url(https://upload2.inven.co.kr/upload/2018/03/12/bbs/i14317311222.png)no-repeat 0 0 / 100%'}}">
<img src="https://upload2.inven.co.kr/upload/2018/03/12/bbs/i15393100295.png" data-inven-click-css="{'la_back':{'background':'url(https://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