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




지난 인벤 스크립트 업데이트를 통해 무작위 배경 이미지를 적용할 수 있게 되었습니다.

공지 링크 : http://www.inven.co.kr/board/webzine/4712/2791

위 기능을 응용하는 방식이라서 많은 분에게 어려울 수 있겠네요.
샘플 소스를 제공해 드려, 조금이라도 쉽게 무작위 배경 이미지를 적용하는 방법을 제공해 드리고자 합니다.

혹시 무작위 배경이 아니라, 단순히 무작위로 이미지가 출력되기를 원하시다면 아래의 글을 참고해 주세요.
무작위 이미지 서식 : http://www.inven.co.kr/board/webzine/4712/1993

12월 6일자 공지는 단순히 무작위 탭을 선택해 주는 기능입니다.
탭 기능 속에는 탭이 선택되었을 때, 특별한 스타일을 적용해 주는 스크립트가 있습니다.

위의 두 개의 기능을 합쳐서,
무작위로 탭이 선택되고 선택된 탭 스타일이 대상(target)에게 적용되는 방식입니다.

이와 관련된 궁금증이나, 인벤 스크립트에 원하시는 의견이 있다면 언제든지 글 남겨주세요.
감사합니다.


■ 소스 샘플

<div data-inven-tabs data-inven-tab-random>
<span data-inven-tab-for="t1" data-inven-selected-css="{'target':{'background':'url(이미지주소)'}}"></span>
<span data-inven-tab-for="t2" data-inven-selected-css="{'target':{'background':'url(이미지주소)'}}"></span>
<span data-inven-tab-for="t3" data-inven-selected-css="{'target':{'background':'url(이미지주소)'}}"></span>
</div>

<div data-inven-id="target">배경 이미지가 바뀌길 원하는 영역</div>



■ 실제 적용 샘플 (새로고침할 때 마다 배경 이미지가 바뀌는 것을 볼 수 있습니다.)

배경 이미지가 바뀌길 원하는 영역



■ 위 샘플의 소스

<div data-inven-tabs data-inven-tab-random>
<span data-inven-tab-for="t1" data-inven-selected-css="{'target':{'background':'url(http://upload2.inven.co.kr/upload/2017/09/21/bbs/i14698514060.jpg) no-repeat 0 0/100%'}}"></span>
<span data-inven-tab-for="t2" data-inven-selected-css="{'target':{'background':'url(http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16069549831.jpg) no-repeat 0 0/100%'}}"></span>
<span data-inven-tab-for="t3" data-inven-selected-css="{'target':{'background':'url(http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16001189225.jpg) no-repeat 0 0/100%'}}"></span>
<span data-inven-tab-for="t4" data-inven-selected-css="{'target':{'background':'url(http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16035166207.jpg) no-repeat 0 0/100%'}}"></span>
<span data-inven-tab-for="t5" data-inven-selected-css="{'target':{'background':'url(http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16066398259.jpg) no-repeat 0 0/100%'}}"></span>
<span data-inven-tab-for="t6" data-inven-selected-css="{'target':{'background':'url(http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16094400043.jpg) no-repeat 0 0/100%'}}"></span>
</div>

<div data-inven-id="target" style="width:450px;height:400px;color:white;">배경 이미지가 바뀌길 원하는 영역</div>