인벤 스크립트에 관심을 가져주셔서 감사합니다.
우선 말씀드리자면, 위에서 문의하신 내용은 인벤 스크립트에서 정식 지원하는 기능과는 형태가 조금 다릅니다. 그렇기에 소스 구현상에 약간의 억지 소스가 섞여 있어도 양해 부탁드립니다.
- 참조글
무작위 출력 :
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(https://upload2.inven.co.kr/upload/2017/07/10/bbs/i16652262817.png);" data-inven-click-css="{'random1':[{'background':'url(https://upload2.inven.co.kr/upload/2017/07/10/bbs/i16681147180.png)'},
{'background':'url(https://upload2.inven.co.kr/upload/2017/07/10/bbs/i16611321024.png)'},
{'background':'url(https://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(https://upload2.inven.co.kr/upload/2017/07/10/bbs/i16640948321.png);"data-inven-click-css="{'random2':[{'background':'url(https://upload2.inven.co.kr/upload/2017/07/10/bbs/i16671782471.png)'},
{'background':'url(https://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(https://upload2.inven.co.kr/upload/2017/07/10/bbs/i16699726887.png);"data-inven-click-css="{'random3':[{'background':'url(https://upload2.inven.co.kr/upload/2017/07/10/bbs/i16627763776.png)'},
{'background':'url(https://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(https://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(https://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(https://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(https://upload2.inven.co.kr/upload/2017/07/10/bbs/i16681147180.png)'},{'background':'url(https://upload2.inven.co.kr/upload/2017/07/10/bbs/i16611321024.png)'},{'background':'url(https://upload2.inven.co.kr/upload/2017/07/10/bbs/i16652262817.png)'}],'random2':[{'background':'url(https://upload2.inven.co.kr/upload/2017/07/10/bbs/i16671782471.png)'},{'background':'url(https://upload2.inven.co.kr/upload/2017/07/10/bbs/i16640948321.png)'}],'random3':[{'background':'url(https://upload2.inven.co.kr/upload/2017/07/10/bbs/i16627763776.png)'},{'background':'url(https://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>
Nacx
Nacx
