[문의] 추가로 스크립트 문의가 있습니다 ㅠ

햐 ㅠㅠ 또 여쭙게 되어 죄송합니다

스크립트 이해도가 많이 떨어지다보니 많이 벅차네요 ㅠㅠ

지금 인장에서 미리보기로 해서 나오는 제 화면인데요

여기서 수정하고 싶은 부분이 있는데 뜻대로 잘 되지 않아서 또 다시 이렇게 문의하게 되었습니다

먼저 저 우측에 있는 짤들을 랜덤으로 돌리고 싶은데....

랜덤으로 돌리는 것까지는 어째저째 하긴했습니다

문제가 여기서 생기더라구요

1. 우측짤 A박스 위치가 높아서 중간 정도로 내리고 싶은데 방법을 모르겠네요

2. A박스 위치시킬 틀은 250x350으로 잡아놓고 그 안에 짤림 없이 보이게 하면서

    틀의 남는 부분은 배경 핑크핑크한게 보이게 하고 싶은데 방법을 모르겠네요...

3. 왼쪽에 위치한 박스를 클릭하면 지금은 저 A박스 밑으로 나오는데

    A박스 위를 덮은 상태로 나왔으면 좋겠는데 이부분도 가능할런지요?.

    

4. 또 스크립트를 만지다보니 하단에 저렇게 빈공간이 뻥하게 비게되었는데

   이부분도 빈공간 없이 핑크핑크 배경정도까지 위로 땡길 수 있을지요?

(표현력이 안좋아서 글로는 이해가 안되실 수도 있을거 같아서

제가 원하는 느낌으로 그림판으로 잘라 붙이고 해서 만들어본 예시입니다)

-------------------------------------------------------------------------

<div data-inven-tabs="" data-inven-tab-random="">

<span data-inven-tab-for="bg1" data-inven-selected-css="{'target':{'background':'url(https://optimal.inven.co.kr/upload/2019/01/17/bbs/i15423451589.jpg)'}}"></span>

<span data-inven-tab-for="bg2" data-inven-selected-css="{'target':{'background':'url(https://optimal.inven.co.kr/upload/2019/01/17/bbs/i15464846753.jpg)'}}"></span>

</div>

<!--색깔배경-->

<div data-inven-tabs="" style="background-color: #fbeff7;">

<!--움짤배경-->

<div style="background-image: url('https://optimal.inven.co.kr/upload/2017/09/16/bbs/i16267698222.gif');min-height: 580px;">

<!--인장검색기-->

<div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; background-image: url('https://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('https://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: right;"><div data-inven-tab-for="0" style="background: url('https://optimal.inven.co.kr/upload/2019/01/16/bbs/i15184709027.jpg'); margin: 15px 15px 0px; border-radius: 15px; border: 1px solid white; border-image: none; width: 250px; height: 350px; overflow: hidden; display: inline-block;"><div data-inven-id="target" style="background-repeat:no-repeat; background-position: right bottom; min-height: 350px;"></div></div></div></div>

<!-- 좌단 메뉴 -->

<div style="float: left;"><div data-inven-tab-for="0" style="background: url('https://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('https://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('https://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('https://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>

<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('https://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(&quot;https://optimal.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png&quot;); border-radius: 6px; border: 1px solid rgb(251, 178, 171); width: 270px; text-align: center;" data-inven-id="exp">

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i13121517136.gif" width="95%" style="">

<img src="https://optimal.inven.co.kr/upload/2019/01/19/bbs/i14403695893.jpg" width="95%" style="">

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i16256334851.jpg" width="95%" style="">

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i14353394064.png" width="95%" style="">

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i13428449512.jpg" width="95%" style="">

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i14356936039.png" width="95%" style="">

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i13853405799.png" width="95%" style="">

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i13834670989.png" width="95%" style="">

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i13891301653.png" width="95%" style="">

</div></div>

<div data-inven-tab-id="2" style="display: none;"><!--메뉴 2 내용-->

<div style="display: inline-block; padding: 6px; background-image: url(&quot;https://optimal.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png&quot;); border-radius: 6px; border: 1px solid rgb(251, 178, 171); width: 270px; text-align: center;" data-inven-id="seal">

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i13656911877.gif" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/16/bbs/i14692100090.png" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i13646396371.png" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i15327202219.png" width="95%" style=""><br>

<img src="https://upload.inven.co.kr/upload/2013/12/29/bbs/i1225408280.jpg" width="95%" style=""><br>

<img src="https://upload.inven.co.kr/upload/2013/12/29/bbs/i3371586992.jpg" width="95%" style=""><br>

<img src="https://upload.inven.co.kr/upload/2013/12/29/bbs/i3264913882.jpg" width="95%" style=""><br>

<img src="https://upload.inven.co.kr/upload/2013/12/29/bbs/i0441064635.jpg" width="95%" style=""><br>

<img src="https://upload.inven.co.kr/upload/2013/12/29/bbs/i0179276615.gif" width="95%" style=""><br>

<img src="https://upload.inven.co.kr/upload/2013/12/29/bbs/i2852799070.jpg" width="95%" style=""><br>

<img src="https://upload.inven.co.kr/upload/2013/12/29/bbs/i2061870920.png" width="95%" style=""><br>

<img src="https://upload.inven.co.kr/upload/2013/12/29/bbs/i2603388342.jpg" width="95%" style=""><br>

<img src="https://upload.inven.co.kr/upload/2013/12/29/bbs/i2948779802.jpg" width="95%" style=""><br>

<img src="https://upload.inven.co.kr/upload/2013/12/29/bbs/i4114702211.jpg" width="95%" style=""><br>

<img src="https://upload.inven.co.kr/upload/2013/12/29/bbs/i4235063811.gif" width="95%" style="">

</div></div>

<div data-inven-tab-id="3" style="display: none;"><!--메뉴 3 내용-->

<div style="display: inline-block; padding: 6px; background-image: url(&quot;https://optimal.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png&quot;); border-radius: 6px; border: 1px solid rgb(251, 178, 171); width: 270px; text-align: center;" data-inven-id="mers">

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i15423451589.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i15484798890.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i15449276053.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i15412298621.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i15464846753.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i13642174638.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i13674847674.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i15475705595.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i15431725004.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i15410264780.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i14667124572.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i14600369148.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i14625372782.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i14670917040.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i14637141192.png" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i14679295366.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i14152782664.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i14128926485.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i15498362381.gif" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i14605958008.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i14612430710.jpg" width="95%" style=""><br>

<img src="https://optimal.inven.co.kr/upload/2019/01/17/bbs/i14690354792.jpg" width="95%" style=""><br>

</div></div>

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