1. 새로고침할 때마다 랜덤한 이미지
기본 틀
<div data-inven-random="i1,i2,i3,i4,i5"></div>
<img data-inven-id="i1" src="이미지 주소1" style="display:none">
<img data-inven-id="i2" src="이미지 주소2" style="display:none">
<img data-inven-id="i3" src="이미지 주소3" style="display:none">
<img data-inven-id="i4" src="이미지 주소4" style="display:none">
<img data-inven-id="i5" src="이미지 주소5" style="display:none">
예시 코드
<div data-inven-random="i1,i2,i3,i4,i5"></div>
<img data-inven-id="i1" src="https://upload2.inven.co.kr/upload/2017/02/10/bbs/i13412250285.jpg" style="display:none">
<img data-inven-id="i2" src="https://upload2.inven.co.kr/upload/2017/02/10/bbs/i13445753572.jpg" style="display:none">
<img data-inven-id="i3" src="https://upload2.inven.co.kr/upload/2017/07/12/bbs/i13248874646.jpg" style="display:none">
<img data-inven-id="i4" src="https://upload2.inven.co.kr/upload/2017/03/18/bbs/i16593116157.jpg" style="display:none">
<img data-inven-id="i5" src="https://upload2.inven.co.kr/upload/2017/02/15/bbs/i13557711354.png" style="display:none">
예시 출력 결과
----------------------------------------------------------------------------
----------------------------------------------------------------------------
가장 기본적인 방법입니다.
2. 1번 + 클릭할 때마다 랜덤한 이미지
기본 틀
<div data-inven-random="i1,i2,i3,i4,i5" style="width:450">
<img data-inven-id="i1" src="이미지 주소1" style="display:none">
<img data-inven-id="i2" src="이미지 주소2" style="display:none">
<img data-inven-id="i3" src="이미지 주소3" style="display:none">
<img data-inven-id="i4" src="이미지 주소4" style="display:none">
<img data-inven-id="i5" src="이미지 주소5" style="display:none">
</div>
예시 코드
<div data-inven-random="i1,i2,i3,i4,i5" style="width:450">
<img data-inven-id="i1" src="https://upload2.inven.co.kr/upload/2017/02/10/bbs/i13412250285.jpg" style="display:none">
<img data-inven-id="i2" src="https://upload2.inven.co.kr/upload/2017/02/10/bbs/i13445753572.jpg" style="display:none">
<img data-inven-id="i3" src="https://upload2.inven.co.kr/upload/2017/07/12/bbs/i13248874646.jpg" style="display:none">
<img data-inven-id="i4" src="https://upload2.inven.co.kr/upload/2017/03/18/bbs/i16593116157.jpg" style="display:none">
<img data-inven-id="i5" src="https://upload2.inven.co.kr/upload/2017/02/15/bbs/i13557711354.png" style="display:none">
</div>
예시 출력 결과
----------------------------------------------------------------------------
----------------------------------------------------------------------------
단순히 </div> 의 위치만 바꿨습니다.
<div> 안의 <img> 들은 인장 편집단계에서 width="438" 이 자동적으로 설정되기 때문에
<div> 에 style="width:450" 를 입력해서 이를 방지합니다.
3. 1번 + 랜덤 버튼
기본 틀
<div style="max-height:450;width:450"><div data-inven-random="i1,i2,i3,i4,i5"></div>
<img data-inven-id="i1" src="이미지 주소1" style="display:none">
<img data-inven-id="i2" src="이미지 주소2" style="display:none">
<img data-inven-id="i3" src="이미지 주소3" style="display:none">
<img data-inven-id="i4" src="이미지 주소4" style="display:none">
<img data-inven-id="i5" src="이미지 주소5" style="display:none">
<a data-inven-random="i1,i2,i3,i4,i5"><img src="랜덤 버튼 주소"></a>
</div>
예시 코드
<div style="max-height:450;width:450"><div data-inven-random="i1,i2,i3,i4,i5"></div>
<img data-inven-id="i1" src="https://upload2.inven.co.kr/upload/2017/02/10/bbs/i13412250285.jpg" style="display:none">
<img data-inven-id="i2" src="https://upload2.inven.co.kr/upload/2017/02/10/bbs/i13445753572.jpg" style="display:none">
<img data-inven-id="i3" src="https://upload2.inven.co.kr/upload/2017/07/12/bbs/i13248874646.jpg" style="display:none">
<img data-inven-id="i4" src="https://upload2.inven.co.kr/upload/2017/03/18/bbs/i16593116157.jpg" style="display:none">
<img data-inven-id="i5" src="https://upload2.inven.co.kr/upload/2017/02/15/bbs/i13557711354.png" style="display:none">
<a data-inven-random="i1,i2,i3,i4,i5" style="position:relative;top:-100"><img src="https://upload2.inven.co.kr/upload/2017/07/14/bbs/i13646996023.png" width="100"></a>
</div>
예시 출력 결과
----------------------------------------------------------------------------
----------------------------------------------------------------------------
data-inven-random 과 data-inven-list는 내용물이 같으면 같은 개체로 취급하기 때문에
랜덤 버튼 또한 data-inven-random="i1,i2,i3,i4,i5" 로 동일하게 작성했습니다.
표시된 이미지의 밑에 버튼이 위치하기 때문에 style="position:relative;top:-100" 코드로 위치를 변경했습니다.
위의 결과로 100px만큼의 하단 공백이 생기기 때문에
최상위 <div> 에 max-height:450 로 높이를 고정해야 합니다.
예시의 경우 5개의 이미지 모두 450x450로 통일했기 때문에 max-height:450 로 했지만
여러분들이 사용할 이미지 중 가장 큰 이미지의 높이를 입력하시면 됩니다.
(위 세 예시 모두 동일한 내용물이기 때문에 랜덤 버튼이 연동됩니다.)
Lua
[유틸리티] 인벤 인장 생성 프로그램
