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

우선 말씀드리자면, 위에서 문의하신 내용은 인벤 스크립트에서 정식 지원하는 기능과는 형태가 조금 다릅니다. 그렇기에 소스 구현상에 약간의 억지 소스가 섞여 있어도 양해 부탁드립니다.

- 참조글
무작위 출력 : http://www.inven.co.kr/board/powerbbs.php?come_idx=4712&l=2#106
클릭시 순서대로 스타일 변경 : http://www.inven.co.kr/board/powerbbs.php?come_idx=4712&l=2#107

본문이 없다는 가정 하에 요청하신 내용을 그대로 구현한 샘플 A와
본문을 추가하고 기능 작동을 위해 태그를 조정한 샘플 B를 참고해 주세요.

랜덤 출력 트리거는 새로고침 할 필요 없이 확인을 위해 만든 부분으로, "랜덤 출력 트리거" 텍스트만 지워주시면, 새로고침 시에만 작동하게 됩니다.

혹시 원하시던 형태와 다르거나, 이외에도 궁금하신 점은 언제든지 글 남겨주세요.
감사합니다.


■ 샘플 A - 본문이 없다고 가정하에 요청 내용 구현

<a data-inven-random="random1,random2,random3">랜덤 출력 트리거</a>

<div data-inven-id="random1" style="display:none;width:400px;height:300px;background:url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16652262817.png);"
data-inven-click-css=
"{'random1':[{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16681147180.png)'},
{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16611321024.png)'},
{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16652262817.png)'}]}"></div>

<div data-inven-id="random2" style="display:none;width:400px;height:300px;background:url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16640948321.png);"
data-inven-click-css=
"{'random2':[{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16671782471.png)'},
{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16640948321.png)'}]}"></div>

<div data-inven-id="random3" style="display:none;width:400px;height:300px;background:url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16699726887.png);"
data-inven-click-css=
"{'random3':[{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16627763776.png)'},
{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16699726887.png)'}]}"></div>



■ 샘플 B - 본문을 추가하고, 기능 작동을 위해 태그 위치를 조정, 랜덤 트리거 제거.

<a data-inven-random="random1,random2,random3"></a>

<div data-inven-id="random1" style="display:none;width:400px;height:300px;background:url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16652262817.png);"></div>
<div data-inven-id="random2" style="display:none;width:400px;height:300px;background:url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16640948321.png);"></div>
<div data-inven-id="random3" style="display:none;width:400px;height:300px;background:url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16699726887.png);"></div>

<!-- margin-top:-300px; 을 이용해, 본문을 위쪽으로 끌어올려, 마치 위에 올려져 있는 것 처럼 처리 -->
<div style="margin-top:-300px;">
<div style="width:380px;height:280px;margin:10px;" data-inven-click-css="
{'random1':[{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16681147180.png)'},
{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16611321024.png)'},
{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16652262817.png)'}],
'random2':[{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16671782471.png)'},
{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16640948321.png)'}],
'random3':[{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16627763776.png)'},
{'background':'url(http://upload2.inven.co.kr/upload/2017/07/10/bbs/i16699726887.png)'}]}">

본문 영역 여백(상하좌우 10px)을 제외한 380*280은 고정으로 출력되도록 설정<br>
<a href="a1">asdfasdf<a href="b2">'asdfasdfasdfasdf'</a>asdfasdf</a><br><br>
XML 문법의 한계로, 일부 링크 처리가 정상적으로 되지 않을 수 있습니다.

<div>
</div>