인벤 스크립트에 관심을 가져주셔서 감사합니다.
요청하신 내용으로 수정된 전체 소스를 올려드리려 했으나, 현재 인장에서 많은 부분이 변경되어 있으신 관계로, 요청하신 내용에 대해서만 답변을 드립니다.
문의해 주신 내용은 크게 두 가지 방법으로 구현할 수 있습니다.
첫 번째 방법은 두 개의 이미지를 놓고 "표시 여부"를 조절하는 방법입니다.
이미지 사이즈 조절 및 관리가 편하고 소스 이해가 상대적으로 편합니다. 하지만 소스가 길어지고 ID를 일일이 연결해 주어야 하는 단점이 있습니다.
두 개의 이미지에 각각 id를 붙여주고, 표시할지 말지(display:none 또는 display:block)를 결정해 주시면 완성됩니다.
첫 번째 방법의 예시
<!-- 메인 버튼 -->
<div data-inven-tab-for="0"
data-inven-selected-css="{'_SELF_':{'paddingLeft':'30px'},'tab_0_si':{'display':'none'},'tab_0_usi':{'display':'block'}}"
data-inven-unselected-css="{'_SELF_':{'paddingLeft':'26px'},'tab_0_si':{'display':'block'},'tab_0_usi':{'display':'none'}}"
style="width: 12px; margin: 6px 0; padding: 4px 2px; border-radius: 0 6px 6px 0; background-color:#000000; color: white; cursor: pointer;">
<a data-inven-tooltip="info">
<img src="이미지 주소" data-inven-id="tab_0_si"> <!-- 기본 이미지 : 선택되지 않았을 때 보이는 이미지-->
<img src="이미지 주소" style="display:hidden;" data-inven-id="tab_0_usi"><!-- 선택했을 때 이미지-->
</a></div>
<!-- 1번 버튼 -->
<div data-inven-tab-for="1"
data-inven-selected-css="{'_SELF_':{'paddingLeft':'30px'},'tab_1_si':{'display':'none'},'tab_1_usi':{'display':'block'}}"
data-inven-unselected-css="{'_SELF_':{'paddingLeft':'26px'},'tab_1_si':{'display':'block'},'tab_1_usi':{'display':'none'}}"
style="width: 12px; margin: 6px 0; padding: 4px 2px; border-radius: 0 6px 6px 0; background-color:#000000; color: white; cursor: pointer;">
<a data-inven-tooltip="system">
<img src="이미지 주소" data-inven-id="tab_1_si"> <!-- 기본 이미지 : 선택되지 않았을 때 보이는 이미지-->
<img src="이미지 주소" style="display:hidden;" data-inven-id="tab_1_usi"><!-- 선택했을 때 이미지-->
</a></div>
두 번째 방법은 이미지를 img src를 통해 넣지 않고, 배경을 이용해서 이미지를 넣는 방법입니다.
소스의 길이가 크게 줄어들고 ID를 따로 연결할 필요가 없지만, 배경 사이즈 조절이 쉽지 않고, 가로 세로 폭을 일일이 결정해 주어야 하는 단점이 있습니다.
두 번째 방법의 예시
<!-- data-inven-selected-css : 선택되었을 때의 CSS, data-inven-unselected-css: 선택되지 않았을 때의 CSS
padding을 넣으면 배경이 padding을 포함한 사이즈로 맞춰지는 관계로 margin으로 변경-->
<!-- 메인 버튼 -->
<div data-inven-tab-for="0"
data-inven-tooltip="info"
data-inven-selected-css="{'_SELF_':{'marginLeft':'30px','background':'url(https://upload2.inven.co.kr/upload/2016/05/22/bbs/i12893320886.png) no-repeat 0% 0% / 100%'}}"
data-inven-unselected-css="{'_SELF_':{'marginLeft':'26px','background':'url(https://upload2.inven.co.kr/upload/2016/05/22/bbs/i13408825690.png) no-repeat 0% 0% / 100%'}}"
style="width:50px;height:50px;">
</div>
<!-- 1번 버튼 -->
<div data-inven-tab-for="1"
data-inven-tooltip="system"
data-inven-selected-css="{'_SELF_':{'marginLeft':'30px','background':'url(https://upload2.inven.co.kr/upload/2016/05/22/bbs/i12893320886.png) no-repeat 0% 0% / 100%'}}"
data-inven-unselected-css="{'_SELF_':{'marginLeft':'26px','background':'url(https://upload2.inven.co.kr/upload/2016/05/22/bbs/i13408825690.png) no-repeat 0% 0% / 100%'}}"
style="width:50px;height:50px;">
</div>
혹시 수정에 어려움을 겪으시거나, 이외에도 궁금한 내용이 있다면 언제든지 글 남겨주세요.
감사합니다.
Nacx
Nacx
