ㅁ

스크립트를 활용하면 인장에서도 옷갈아입히기를 놀 수 있습니다.

옷갈아입히기 스크립트를 Want님의 도움을 받아서 정리, 완성했습니다. Want님 정말 감사합니다.

인벤 스크립트 게시판 주소:http://www.inven.co.kr/board/powerbbs.php?come_idx=4712

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

필요한것: 같은 사이즈의 배경이 투명한 png 그림들

설명 시작

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

제일 먼저 레이어(?)의 스크립트 부분

<div style="width: 450px; height:450px;">

그림의 크기를 정하는 스크립트 입니다. 인장의 가로는 450인 모양이므로 이번에는 width: 450px으로 설정 합니다. 더 줄일수도 있습니다.  height는 세로 길이 입니다. 이번에 쓸 그림은 전부 512X512 이므로 이쪽도 450으로.

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

<div data-inven-id="AAAA" style="width:100%;height:100%;background:url(http://사진1 주소) center / 100% no-repeat;">

<div data-inven-id="BBBB" style="width:width:100%;height:100%;">

<div>

다음은 그림의 순서와 설정입니다. 위와같이 하면 AAAA가 먼저 표시되고 BBBB가 그 다음(AAAA의 위에) 표시됩니다. AAAA는 처음부터 그림이 나오고 BBBB는 처음부터 그림이 나오지 않습니다. BBBB의 경우 후술할 버튼을 클릭해야 그림이 나오도록 설정해야 합니다.

레이어 부분 스크립트가 끝난뒤 <div>를 제일 마지막에 하나만 추가 해주세요.

background:url(http://) 의 http부분에 자신이 원하는 사진의 url을 복사해서 넣어주세요.

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

다음은 버튼 부분 스크립트 입니다.

<div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightgreen; border-radius: 5px;text-align:center;" data-inven-click-css="{'AAAA':[{'background':'none'},{'background':'url(http://사진1 주소) center / 100% no-repeat'}]}"><span style="font-weight:bold;">예시1</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color: yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'BBBB':[{'background':'url(http://사진2 주소) center / 100% no-repeat'},{'background':'none'},{'background':'url(http://사진3 주소) center / 100% no-repeat'}]}"><span style="font-weight:bold;">예시2</span></div>

이렇게 할 경우 예시1 버튼은 AAAA레이어와 연동되며. 누를경우 처음에는 사진 비표시, 다시 누르면 사진1 표시 를 합니다. 다시 누르면 사진 비표시-> 사진1 표시를 합니다. 사진1(처음부터)-> 사진X-> 사진1-> 사진X ->..... 반복

예시2 버튼은 BBBB레이어와 연동되며, 사진2 표시->사진 비표시->사진3 표시를 합니다.

사진X(처음부터)-> 사진2-> 사진X-> 사진3-> 사진2-> 사진X->.... 반복

AAAA의 버튼은 구현 안해도 사진1은 나오지만, 비표시도 불가능합니다. 처음부터 계속 표시할 그림의 경우 버튼을 안만들어도 됩니다.

width: 60px; height:18px; margin:5px; float: left; background-color: lightgreen; border-radius: 5px; 가로 60px, 세로18px, 여백 5px(이건 뭔지 잘 모르겠네요). 색깔 밝은 초록색 입니다. 색깔 부분은 자신이 원하는 색으로 바꾸셔도 되고, 글씨 크기나 길이에 따라서 가로 세로 조정해주시면 됩니다.

{'background':'url(http://) center / 100% no-repeat'} 의 http:// 부분에 자신이 원하는 사진을 넣어주면 됩니다.

{'background':'none'} 는 그림 비표시 스크립트입니다.

매 버튼 끝부분에 <div>넣는거 잊지마세요.

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

그리고 초기화 버튼입니다. 이거는 처음 레이어 스크립트 부분의 초기치와 같게 설정해주세요.

<div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightblue; border-radius: 5px;text-align:center;" data-inven-click-css="{'AAAA':{'background':'url(http://사진1 주소) center / 100% no-repeat'},'BBBB':{'background':'none'}}"><span style="font-weight:bold;">초기화</span></div>

이걸로 기초는 끝입니다.

자 그럼 본격적으로 시작합시다.

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

<div style="width: 450px; height:450px;"><div data-inven-id="DDD" style="width:100%;height:100%;background:url(https://upload2.inven.co.kr/upload/2017/11/30/bbs/i13143152034.png) center / 100% no-repeat;"><div data-inven-id="AAA" style="width:100%;height:100%;background:url(https://upload2.inven.co.kr/upload/2017/11/30/bbs/i13119115627.png) center / 100% no-repeat;"><div data-inven-id="BBB" style="width:100%;height:100%;background:url(https://upload2.inven.co.kr/upload/2017/11/30/bbs/i13181338114.png) center / 100% no-repeat;"><div data-inven-id="CCC" style="width:width:100%;height:100%;"></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'BBB':[{'background':'url(https://upload2.inven.co.kr/upload/2017/11/30/bbs/i13112386991.png) center / 100% no-repeat'},{'background':'none'},{'background':'url(https://upload2.inven.co.kr/upload/2017/11/30/bbs/i13181338114.png) center / 100% no-repeat'}]}"><span style="font-weight:bold;">표정</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightgreen; border-radius: 5px;text-align:center;" data-inven-click-css="{'CCC':[{'background':'url(https://upload2.inven.co.kr/upload/2017/11/30/bbs/i13150310579.png) center / 100% no-repeat'},{'background':'none'}]}"><span style="font-weight:bold;">머리카락</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightgreen; border-radius: 5px;text-align:center;" data-inven-click-css="{'DDD':[{'background':'none'},{'background':'url(https://upload2.inven.co.kr/upload/2017/11/30/bbs/i13143152034.png) center / 100% no-repeat'}]}"><span style="font-weight:bold;">망토</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightblue; border-radius: 5px;text-align:center;" data-inven-click-css="{'BBB':{'background':'url(https://upload2.inven.co.kr/upload/2017/11/30/bbs/i13181338114.png) center / 100% no-repeat'},'CCC':{'background':'none'},'DDD':{'background':'url(https://upload2.inven.co.kr/upload/2017/11/30/bbs/i13143152034.png) center / 100% no-repeat'}}"><span style="font-weight:bold;">초기화</span>

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

가독성을 위해 띄어놓은 부분을 합치면 아래와 같은 결과가 나올껍니다.

표정

머리카락

망토

초기화

이걸로 설명은 끝이며, 만약 모르는 부분, 따라했는데 잘 안되는 부분 있으면 댓글로 문의해주세요. 가능한 범위에서 설명하겠습니다. (좀 나중에요.)

그리고 한번 더 정리해서 나중에 재 업로드 할 예정입니다.