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

문의하신 내용은 두 가지 방법으로 구현할 수 있을 것으로 생각됩니다.

1. 탭 기능을 이용
http://www.inven.co.kr/board/powerbbs.php?come_idx=4712&l=2#111

2. data-inven-click-css 를 이용
http://www.inven.co.kr/board/powerbbs.php?come_idx=4712&l=340

2번 방법은 많은 분들이 이미지 편집을 어려워하시는 감이 있어서,
1번 방법을 통해 구현한 소스를 답글을 통해 전달해 드리겠습니다.

기능은 같지만, 일부 작은 그림의 스타일(max-width:450px)이 기존 소스에서는 적용되지 않고 있어서,
기존과는 조금 다르게 보일 수 있으니, 확인 부탁드립니다.

기존과 동일하게 하기 위해서는 max-width를 width로 변경해 주시면 됩니다.


혹시 원하시던 기능과 다르거나, 이외에도 궁금하신 내용이 있으시면 언제든지 글 남겨주세요.
감사합니다.


□ HTML을 누른 상태에서 붙여넣어 주세요.

<!-- 랜덤 이미지 최초 이미지 버튼 -->
<div data-inven-hide="_SELF_" data-inven-show="lecture2_1_images">
<img width="438" id="main_img_2_1" src="http://upload2.inven.co.kr/upload/2015/09/13/bbs/i11083323443.gif">
</div>

<div data-inven-id="lecture2_1_images" style="display: none;">
<span data-inven-random="ri1,ri2,ri3"><!-- 랜덤 이미지 리스트 -->
<img data-inven-id="ri1" width="438" src="http://upload2.inven.co.kr/upload/2015/11/30/bbs/i11030739700.jpg">
<img data-inven-id="ri2" width="438" src="http://upload2.inven.co.kr/upload/2015/11/29/bbs/i10115125711.png">
<img data-inven-id="ri3" width="438" src="http://upload2.inven.co.kr/upload/2015/09/13/bbs/i11083323443.gif">
</span>
</div>

<div style="text-align: center;">
<span style="line-height: 1.4;"><font color="#cccccc" size="2"><b>누르면 인장이 랜덤으로 바뀝니다.</b></font></span>
</div>

<br / >
<!-- 내용1 -->

<div style="text-align: center;line-height: 19.2px; font-size: 9pt;font-weight:bold;">
누구나 사랑을, 우정을 찬미한다. 하지만 그것은 승리자의 전유물이다.<br />
패배하고 잃어버린 자의 한탄은 아무도 들으려 하지 않는다.<br />
그렇다면 내가 듣겠다. 소리 높여 노래하겠다.<br />
이것은 형장으로 끌려가는&nbsp;<font color="#ff0000">죄인</font>의 노래.<br />
누군가에게 이끌려도 거부당해도 허세밖에 부리지 못하는 자들을 위한&nbsp;<br />
<font color="#990000">진혼가</font>다.</div>

<br />
<br />

<!-- 흐르는 이미지 리스트 -->
<div data-inven-tabs data-inven-tab-selected="isc1">
<div><!--이미지 1열-->
<marquee height="100" style="height: 100px;" direction="left" scrollamount="4">
<img style="height: 100px;" data-inven-tab-for="isc1" src="http://upload2.inven.co.kr/upload/2015/12/11/bbs/i11323940412.gif">
<img style="height: 100px;" data-inven-tab-for="isc2" src="http://upload2.inven.co.kr/upload/2015/11/29/bbs/i10113374517.gif">
<img style="height: 100px;" data-inven-tab-for="isc3" src="http://upload2.inven.co.kr/upload/2015/09/05/bbs/i11243218649.gif">
<img style="height: 100px;" data-inven-tab-for="isc4" src="http://upload2.inven.co.kr/upload/2015/09/05/bbs/i13551941027.gif">
</marquee>
</div>

<div><!--이미지 2열-->
<marquee height="100" style="height: 100px;" direction="right" scrollamount="4">
<img style="height: 100px;" data-inven-tab-for="isc5" src="http://upload2.inven.co.kr/upload/2016/01/22/bbs/i10152754958.png">
<img style="height: 100px;" data-inven-tab-for="isc6" src="http://upload2.inven.co.kr/upload/2015/07/07/bbs/i10912745209.jpg">
<img style="height: 100px;" data-inven-tab-for="isc7" src="http://upload2.inven.co.kr/upload/2015/11/30/bbs/i10135621172.png">
<img style="height: 100px;" data-inven-tab-for="isc8" src="http://upload2.inven.co.kr/upload/2015/11/29/bbs/i12704215251.png">
</marquee>
</div>

<!-- 표시될 하단 이미지 -->
<div data-inven-tab-id="isc1" style="text-align:center;"><img style="max-width:450px;" src="http://upload2.inven.co.kr/upload/2015/12/11/bbs/i11323940412.gif"></div>
<div data-inven-tab-id="isc2" style="text-align:center;"><img style="max-width:450px;" src="http://upload2.inven.co.kr/upload/2015/11/29/bbs/i10113374517.gif"></div>
<div data-inven-tab-id="isc3" style="text-align:center;"><img style="max-width:450px;" src="http://upload2.inven.co.kr/upload/2015/09/05/bbs/i11243218649.gif"></div>
<div data-inven-tab-id="isc4" style="text-align:center;"><img style="max-width:450px;" src="http://upload2.inven.co.kr/upload/2015/09/05/bbs/i13551941027.gif"></div>
<div data-inven-tab-id="isc5" style="text-align:center;"><img style="max-width:450px;" src="http://upload2.inven.co.kr/upload/2016/01/22/bbs/i10152754958.png"></div>
<div data-inven-tab-id="isc6" style="text-align:center;"><img style="max-width:450px;" src="http://upload2.inven.co.kr/upload/2015/07/07/bbs/i10912745209.jpg"></div>
<div data-inven-tab-id="isc7" style="text-align:center;"><img style="max-width:450px;" src="http://upload2.inven.co.kr/upload/2015/11/30/bbs/i10135621172.png"></div>
<div data-inven-tab-id="isc8" style="text-align:center;"><img style="max-width:450px;" src="http://upload2.inven.co.kr/upload/2015/11/29/bbs/i12704215251.png"></div>
</div>
<div style="text-align: center;line-height: 1.4; font-size: 9pt;"><font color="#cccccc">흐르는 작은 이미지를 누르시면 큰 이미지가 바뀝니다.</font></div>
<div style="text-align: center;line-height: 1.4;font-weight:bold;"><font color="#9900ff" size="4">안나 귀여워요 안나!</font></div>
<br /><br /><br />