[기타] '질풍의라빈'님이 문의하신 2종의 스크립트 입니다.

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

문의하신 2종의 소스를 전달 드립니다.
사용해 보시고, 원하시던 형태와 다르거나, 이외에도 궁금하신 내용은 언제든지 글 남겨 주세요.

감사합니다.


1. 좌표를 이용한 화면 겹치기 소스

---

<!-- 이미지 상자 -->
<img src="https://upload2.inven.co.kr/upload/2017/05/09/bbs/i16043951417.jpg" style ="width:450px;overflow:visible;" usemap="#genesis" />

<!-- 이미지 맵 -->
<map name="genesis">
<area shape="rect" coords="1,1,240,115" data-inven-over-css="{'img1':{'display':'block'}}" data-inven-out-css="{'img1':{'display':'none'}}" />
<area shape="rect" coords="241,1,380,115" data-inven-over-css="{'img2':{'display':'block'}}" data-inven-out-css="{'img2':{'display':'none'}}" />
</map>


<!-- 뜨는 이미지 -->
<img src="https://upload2.inven.co.kr/upload/2017/05/09/bbs/i15261753674.jpg" data-inven-id="img1" style="display:none;width:200px;margin:-180 0 0 50;">
<img src="https://upload2.inven.co.kr/upload/2017/05/09/bbs/i15232878528.jpg" data-inven-id="img2" style="display:none;margin:-180 0 0 50;">



2. 인장틀을 가로로 표시하는 소스

---

<div data-inven-tabs><!-- 탭 버튼 첫번째 줄 --><div style="position:relative;height:26px;overflow:hidden;margin-bottom:4px;"><div data-inven-tab-for="0" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:0px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">기록</div><div data-inven-tab-for="1" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:4px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">경험치표</div><div data-inven-tab-for="2" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:4px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">특수기능</div><div data-inven-tab-for="3" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:4px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">문의</div></div><!-- 탭 버튼 두번째 줄 --><div style="position:relative;height:26px;overflow:hidden;margin-bottom:4px;"><div data-inven-tab-for="4" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:0px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">기록1</div><div data-inven-tab-for="5" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:4px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">경험치표1</div><div data-inven-tab-for="6" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:4px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">특수기능1</div><div data-inven-tab-for="7" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:4px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">문의1</div></div><!-- 탭 본문 영역--><div data-inven-tab-id="0" style="min-height: 300px;">기록 내용</div><div data-inven-tab-id="1" style="display: none;">경험치표 내용</div><div data-inven-tab-id="2" style="display: none;">특수기능 내용</div><div data-inven-tab-id="3" style="display: none;">문의 내용</div><div data-inven-tab-id="4" style="display: none;">기록1 내용</div><div data-inven-tab-id="5" style="display: none;">경험치표1 내용</div><div data-inven-tab-id="6" style="display: none;">특수기능1 내용</div><div data-inven-tab-id="7" style="display: none;">문의1 내용</div></div>