 Nacx2019-01-21 14:57
조회: 2,439
추천: 0
"필리아살리스"님의 수정된 스크립트 입니다.인벤 스크립트에 관심을 가져주셔서 감사합니다.
일부는 조금 다른 방법으로 소스를 구현하여, 원하시는 형태를 위해 추가 수정이 필요할 수 있어 설명을 같이 전달 드립니다. - 우측에 삽입되는 이미지는 박스가 아닌 배경으로 소스를 변경하였습니다. 1. 우측 박스 높이 조절 가장 상단에 이미지 소스를 보면, 아래와 같은 양식으로 변경되어 있습니다. 'background':'url(이미지 주소)no-repeat right 65px/70%' 'background':'url(이미지 주소)반복안함 가로정렬 세로정렬/이미지_크기' 여기서 세로 정렬 부분에 px 값을 변경해서 높이를 조절해 주실 수 있습니다. (right 부분도 숫자로 변경해서 원하는 위치에 위치시킬 수 있습니다.) 손쉽게 저기 숫자를 center로 입력해 주시면 자동으로 세로 중앙에 맞춰지는데, 스크롤이 길어지면 그에 맞춰 이미지가 이동하니 이동하길 원치 않으시면 숫자로 입력해 주세요. 2. 이미지 틀 자바스크립트에는 이미지의 규격을 호출해서 가로세로 값을 비교하면서 처리를 할 수 있습니다만, 유감스럽게도 자바스크립트를 사용할 수 없는 상태에서는 위의 가장 끝에 붙어 있는 '이미지_크기' 값을 조절해 가면서 맞춰 주시는 방법을 이용해 주셔야 합니다. 저 부분은 px 단위로도 입력할 수 있고, 예시와 같이 % (가로폭 대비 이미지가 차지하는 %)를 사용하실 수도 있습니다. (auto 50% 와 같은 형태로 입력하면 세로폭을 기준으로 맞출 수도 있습니다.) 3. 덮어씌워 출력 이미지가 배경으로 취급되어 별도의 변경 없이 원하시던 형태로 작동할 것입니다. 4. 하단 빈 공간 마찬가지로 이미지가 배경으로 취급되어 별도의 변경 없이 해당 영역은 지워져서 잘 작동할 것입니다. 원하시던 형태와 다르거나, 수정에 어려움이 있으신 경우 이외에도 궁금하신 점은 언제든지 글 남겨주세요. 감사합니다. ■ HTML을 누른 상태에서 붙여넣어 주세요. <div data-inven-tabs="" data-inven-tab-random=""> <span data-inven-tab-for="bg1" data-inven-selected-css="{'target':{'background':'url(http://optimal.inven.co.kr/upload/2019/01/17/bbs/i15423451589.jpg)no-repeat right 65px/70%'}}"></span> <span data-inven-tab-for="bg2" data-inven-selected-css="{'target':{'background':'url(http://optimal.inven.co.kr/upload/2019/01/17/bbs/i15464846753.jpg)no-repeat right 170px/70%'}}"></span> </div> <!--색깔배경--> <div data-inven-tabs="" style="background-color: #fbeff7;"> <!--움짤배경--> <div style="background-image: url('http://optimal.inven.co.kr/upload/2017/09/16/bbs/i16267698222.gif');min-height: 580px;"> <div data-inven-id="target" style="width:100%;min-height: 580px;"> <!--인장검색기--> <div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; background-image: url('http://optimal.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 6px; margin-left: 6px; color: #ff99ab; border-radius: 6px; border: 1px solid #ff99ab; overflow: hidden; font-size: 11px; padding: 0;" data-inven-action="last-attack-10,last-attack-20,last-attack-all,send-note,search-profile" data-no-tooltip="" data-inven-result-detail="" data-inven-nick-default="필리아살리아" data-inven-align="center"><span data-inven-attr-for="input" style="float: left; margin: 2px 1px 0 4px; width: 130px; font-size: 11px; color: #000000; padding: 0 2px; height: 17px;"></span><span data-inven-attr-for="button" data-inven-over-css="{'_SELF_':{'backgroundColor':'#ffccd4'}}" data-inven-out-css="{'_SELF_':{'backgroundColor':'#ff99ab'}}" style="float: left; margin: 0 0 0 1px; padding: 6px 4px 4px 4px; background-color: #ff99ab; color: white; border: 0; font-size: 11px; line-height: 100%; height: auto; transition: all 0.1s;"></span><span data-inven-attr-for="action-result" data-position="out" data-remain-result="" style="background-image: url('http://optimal.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 2px; margin-left: 6px; color: #ff99ab; border-radius: 6px; border: 1px solid #ff99ab; padding: 4px 6px; font-size: 11px; width: 300px;"></span></div> <div style="padding-top: 1px;"> <!-- 좌단 메뉴 --> <div style="float: left;"><div data-inven-tab-for="0" style="background: url('http://optimal.inven.co.kr/upload/2019/01/16/bbs/i15184709027.jpg'); margin: 15px 15px 0px; border-radius: 15px; border: 3px solid white; border-image: none; width: 96px; height: 96px; overflow: hidden; display: inline-block;"><div style="transition:0.4s; width: 96px; height: 96px; text-align: center; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;" data-inven-over-css="{'_SELF_':{'background-color':'#ffccd4','color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-toggle="prof"><div style="padding: 0.8em; font-size: 15px; font-weight: bold;">프로필</div> </div></div> <br><br> <div data-inven-tab-for="1" style="background: url('http://optimal.inven.co.kr/upload/2019/01/16/bbs/i13797736142.jpg'); margin: 15px 15px 0px; border-radius: 15px; border: 3px solid white; border-image: none; width: 96px; height: 96px; overflow: hidden; display: inline-block;"><div style="transition:0.4s; width: 96px; height: 96px; text-align: center; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;" data-inven-over-css="{'_SELF_':{'background-color':'#ffccd4','color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-toggle="exp"><div style="padding: 0.8em; font-size: 15px; font-weight: bold;">필리아</div> </div></div> <br><br> <div data-inven-tab-for="2" style="background: url('http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14077816987.jpg'); margin: 15px 15px 0px; border-radius: 15px; border: 3px solid white; border-image: none; width: 96px; height: 96px; overflow: hidden; display: inline-block;"><div style="transition:0.4s; width: 96px; height: 96px; text-align: center; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;" data-inven-over-css="{'_SELF_':{'background-color':'#ffccd4','color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-toggle="seal"><div style="padding: 0.8em; font-size: 15px; font-weight: bold;">받은 인장</div> </div></div> <br><br> <div data-inven-tab-for="3" style="background: url('http://optimal.inven.co.kr/upload/2019/01/17/bbs/i13861310869.jpg'); margin: 15px 15px 0px; border-radius: 15px; border: 3px solid white; border-image: none; width: 96px; height: 96px; overflow: hidden; display: inline-block;"><div style="transition:0.4s; width: 96px; height: 96px; text-align: center; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;" data-inven-over-css="{'_SELF_':{'background-color':'#ffccd4','color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-toggle="mers"><div style="padding: 0.8em; font-size: 15px; font-weight: bold;">메르시</div> </div></div> </div> <br><br> <div style="margin-left: 146px; margin-top: 16px; padding-bottom: 12px;"> <div data-inven-tab-id="0" style="min-height: 300px;"><!--메인 메뉴 내용--> <div style="display: none; width: 160px; background-image: url('http://optimal.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png'); border-radius: 6px; border: 1px solid #fbb2ab;" data-inven-id="prof"> <div style="border-bottom: 1px solid #fbb2ab; color: #f67fde;padding: 4px 8px; font-weight: bold;">필리아 살리스<br>(Phillia salis)</div> <div style="padding: 4px 8px;"> <div style="padding: 4px 8px; color: #ff99ab; font-weight: bold;">신분 : 여왕</div> <div style="padding: 4px 8px; color: #ff99ab; font-weight: bold;">생일 : ? 월 ? 일</div> <div style="padding: 4px 8px; color: #ff99ab; font-weight: bold;">키 : ? cm</div> <div style="padding: 4px 8px; color: #ff99ab; font-weight: bold;">몸무게 : ? kg</div> <div style="padding: 4px 8px; color: #ff99ab; font-weight: bold;">나이 : 27세</div> <div style="padding: 4px 8px; color: #ff99ab; font-weight: bold;">좋아하는 것 : 빙수<br> 단두대</div> </div> </div> </div> <div data-inven-tab-id="1" style="display: none;"><!--메뉴 1 내용--> <div style="display: inline-block; padding: 6px; background-image: url("http://optimal.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png"); border-radius: 6px; border: 1px solid rgb(251, 178, 171); width: 270px; text-align: center;" data-inven-id="exp"> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i13121517136.gif" width="95%"> <img src="http://optimal.inven.co.kr/upload/2019/01/19/bbs/i14403695893.jpg" width="95%"> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i16256334851.jpg" width="95%"> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14353394064.png" width="95%"> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i13428449512.jpg" width="95%"> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14356936039.png" width="95%"> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i13853405799.png" width="95%"> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i13834670989.png" width="95%"> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i13891301653.png" width="95%"> </div></div> <div data-inven-tab-id="2" style="display: none;"><!--메뉴 2 내용--> <div style="display: inline-block; padding: 6px; background-image: url("http://optimal.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png"); border-radius: 6px; border: 1px solid rgb(251, 178, 171); width: 270px; text-align: center;" data-inven-id="seal"> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i13656911877.gif" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/16/bbs/i14692100090.png" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i13646396371.png" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i15327202219.png" width="95%"><br> <img src="http://upload.inven.co.kr/upload/2013/12/29/bbs/i1225408280.jpg" width="95%"><br> <img src="http://upload.inven.co.kr/upload/2013/12/29/bbs/i3371586992.jpg" width="95%"><br> <img src="http://upload.inven.co.kr/upload/2013/12/29/bbs/i3264913882.jpg" width="95%"><br> <img src="http://upload.inven.co.kr/upload/2013/12/29/bbs/i0441064635.jpg" width="95%"><br> <img src="http://upload.inven.co.kr/upload/2013/12/29/bbs/i0179276615.gif" width="95%"><br> <img src="http://upload.inven.co.kr/upload/2013/12/29/bbs/i2852799070.jpg" width="95%"><br> <img src="http://upload.inven.co.kr/upload/2013/12/29/bbs/i2061870920.png" width="95%"><br> <img src="http://upload.inven.co.kr/upload/2013/12/29/bbs/i2603388342.jpg" width="95%"><br> <img src="http://upload.inven.co.kr/upload/2013/12/29/bbs/i2948779802.jpg" width="95%"><br> <img src="http://upload.inven.co.kr/upload/2013/12/29/bbs/i4114702211.jpg" width="95%"><br> <img src="http://upload.inven.co.kr/upload/2013/12/29/bbs/i4235063811.gif" width="95%"> </div></div> <div data-inven-tab-id="3" style="display: none;"><!--메뉴 3 내용--> <div style="display: inline-block; padding: 6px; background-image: url("http://optimal.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png"); border-radius: 6px; border: 1px solid rgb(251, 178, 171); width: 270px; text-align: center;" data-inven-id="mers"> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i15423451589.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i15484798890.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i15449276053.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i15412298621.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i15464846753.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i13642174638.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i13674847674.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i15475705595.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i15431725004.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i15410264780.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14667124572.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14600369148.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14625372782.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14670917040.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14637141192.png" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14679295366.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14152782664.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14128926485.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i15498362381.gif" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14605958008.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14612430710.jpg" width="95%"><br> <img src="http://optimal.inven.co.kr/upload/2019/01/17/bbs/i14690354792.jpg" width="95%"><br> </div></div> </div></div></div> |
Nacx 
