[기타] '감이셀'님이 문의하신 스크립트 입니다.

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

올려주신 내용을 바탕으로 작성된 소스를 전달 드립니다.

동작이 애매한 부분이 있어서 여러개의 샘플을 전달 드리니, 원하시는 형태와 가장 닮은 소스를 이용해 주세요.
※ 인장에 사용할 것을 가정으로 가로폭(width) 값을 일괄 450px로 작업했습니다.
필요하신 환경에 따라서 width와 height를 조절해서 사용해 주세요.

링크의 경우는 가독성을 위해서 생략했습니다. 링크는 주석 위치에 삽입해 주시면 됩니다만,
수정에 어려움이 있으신 경우는 원하시는 규격(가로폭과 1~5번)을 정해서 말씀해 주세요.

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


1. 절반의 <div> 영역을 잡고, 해당 영역에 마우스가 올라갈 경우, 배경 이미지가 변경되는 방식
아마도 올려주신 소스와 가장 비슷한 방식으로 생각됩니다.

<div style="background:url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16191249286.png)0 0/100%;width:450px;height:169px;" data-inven-id="borad">

<!-- 좌측 이미지 :: 카페 -->
<div style="width:225px;float:left;height:169px;"
data-inven-over-css="{'borad':{'background':'url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16123698671.png)no-repeat 0 0/100%'}}"
data-inven-out-css="{'borad':{'background':'url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16191249286.png)0 0/100%'}}"
></div>

<!-- 우측 이미지 :: 문의 -->
<div style="width:225px;float:left;height:169px;"
data-inven-over-css="{'borad':{'background':'url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16154788417.png)no-repeat 0 0/100%'}}"
data-inven-out-css="{'borad':{'background':'url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16191249286.png)0 0/100%'}}"
></div>

</div>

2. 1번 방식에서 카페에 올렸는데, 마우스를 옆으로 옮기면 문의로 넘어가 버립니다. (링크마져도) 마우스가 완전히 아웃되면 다시 선택지로 돌아오게 변경해 봤습니다.

<div style="background:url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16191249286.png)0 0/100%;width:450px;height:169px;">

<!-- 좌측 이미지 :: 카페 -->
<div style="background:url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16123698671.png)no-repeat 0 0/100%;width:225px;float:left;opacity:0;height:169px;"
data-inven-id="cafe"
data-inven-over-css="{'cafe':{'opacity':'1','width':'450px'},'ask':{'opacity':'0','width':'0px'}}"
data-inven-out-css="{'cafe':{'opacity':'0','width':'225px'},'ask':{'opacity':'0','width':'225px'}}"
></div>

<!-- 우측 이미지 :: 문의 -->
<div style="background:url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16154788417.png)no-repeat 0 0/100%;width:225px;float:left;opacity:0;height:169px;"
data-inven-id="ask"
data-inven-over-css="{'cafe':{'opacity':'0','width':'0px'},'ask':{'opacity':'1','width':'450px'}}"
data-inven-out-css="{'cafe':{'opacity':'0','width':'225px'},'ask':{'opacity':'0','width':'225px'}}"
></div>

</div>

3. 2번 방식은 투명도와 가로폭을 사용하고 있어, 애니메이션 효과를 주기 좋습니다. transtion 속성을 추가해 봤습니다.

<div style="background:url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16191249286.png)0 0/100%;width:450px;height:169px;">

<!-- 좌측 이미지 :: 카페 -->
<div style="background:url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16123698671.png)no-repeat 0 0/100%;width:225px;float:left;opacity:0;transition:0.3s;height:169px;"
data-inven-id="cafe"
data-inven-over-css="{'cafe':{'opacity':'1','width':'450px'},'ask':{'opacity':'0','width':'0px'}}"
data-inven-out-css="{'cafe':{'opacity':'0','width':'225px'},'ask':{'opacity':'0','width':'225px'}}"
></div>

<!-- 우측 이미지 :: 문의 -->
<div style="background:url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16154788417.png)no-repeat 0 0/100%;width:225px;float:left;opacity:0;transition:0.3s;height:169px;"
data-inven-id="ask"
data-inven-over-css="{'cafe':{'opacity':'0','width':'0px'},'ask':{'opacity':'1','width':'450px'}}"
data-inven-out-css="{'cafe':{'opacity':'0','width':'225px'},'ask':{'opacity':'0','width':'225px'}}"
></div>

</div>

4. 3번 방식에서 배경이 100%로 맞춰지다 보니, 마치 줌인 되는 것 처럼 보입니다. 이걸 개선하기 위해 이미지의 배경을 100%에서 450px로 고정해 보았습니다.

<div style="background:url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16191249286.png)0 0/100%;width:450px;height:169px;">

<!-- 좌측 이미지 :: 카페 -->
<div style="background:url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16123698671.png)0 0/450px;width:225px;float:left;opacity:0;transition:0.3s;height:169px;"
data-inven-id="cafe"
data-inven-over-css="{'cafe':{'opacity':'1','width':'450px'},'ask':{'opacity':'0','width':'0px'}}"
data-inven-out-css="{'cafe':{'opacity':'0','width':'225px'},'ask':{'opacity':'0','width':'225px'}}"
></div>

<!-- 우측 이미지 :: 문의 -->
<div style="background:url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16154788417.png)no-repeat 0 0/450px;width:225px;float:left;opacity:0;transition:0.3s;height:169px;"
data-inven-id="ask"
data-inven-over-css="{'cafe':{'opacity':'0','width':'0px'},'ask':{'opacity':'1','width':'450px'}}"
data-inven-out-css="{'cafe':{'opacity':'0','width':'225px'},'ask':{'opacity':'0','width':'225px'}}"
></div>

</div>

5. 4번 방식은 아무래도 문의 쪽은 어울리지 않습니다. 마우스가 떠날 때는 width 변화에 딜레이를 줘서, 오버레이 되는 느낌으로 변경 했습니다.

<div style="background:url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16191249286.png)0 0/100%;width:450px;height:169px;">

<!-- 좌측 이미지 :: 카페 -->
<div style="background:url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16123698671.png)0 0/450px;width:231px;float:left;opacity:0;height:169px;transition:opacity 0.3s;"
data-inven-id="cafe"
data-inven-over-css="{'cafe':{'opacity':'1','width':'450px','transition':'width 0s linear 0s, opacity 0.3s'},'ask':{'opacity':'0','width':'0px','transition':'width 0s linear 0s, opacity 0.3s'}}"
data-inven-out-css="{'cafe':{'opacity':'0','width':'231px','transition':'width 0s linear 0.3s, opacity 0.3s'},'ask':{'opacity':'0','width':'219px','transition':'width 0s linear 0.3s, opacity 0.3s'}}"
></div>

<!-- 우측 이미지 :: 문의 -->
<div style="background:url(https://upload2.inven.co.kr/upload/2018/11/09/bbs/i16154788417.png)no-repeat 0 0/450px;width:219px;float:left;opacity:0;height:169px;transition:opacity 0.3s;"
data-inven-id="ask"
data-inven-over-css="{'cafe':{'opacity':'0','width':'0px','transition':'width 0s linear 0s, opacity 0.3s'},'ask':{'opacity':'1','width':'450px','transition':'width 0s linear 0s, opacity 0.3s'}}"
data-inven-out-css="{'cafe':{'opacity':'0','width':'231px','transition':'width 0s linear 0.3s, opacity 0.3s'},'ask':{'opacity':'0','width':'219px','transition':'width 0s linear 0.3s, opacity 0.3s'}}"
></div>

</div>