인벤 스크립트에 관심을 가져주셔서 감사합니다.
전달해야 하는 내용이 댓글로는 조금 정리하기 힘들어 답글로 전달해 드립니다.
내용 자체는 '크세니아'님이 달아준 답글과 크게 차이 나지는 않습니다.
1번 2번 질문은 똑같은 기능을 이용해 주시면 됩니다.
<!-- 마우스를 올려서 이미지가 변하는 부분-->
<a href="#" style="text-decoration:none;"
data-inven-over-css="{'target1':{'display':'none'},'target2':{'display':'block'}}"
data-inven-out-css="{'target1':{'display':'block'},'target2':{'display':'none'}}">
<div data-inven-id="target1" >
<img src="이미지A 주소" style="width:400px;height:600px;"></div>
<div data-inven-id="target2" >
<img src="이미지B 주소" style="width:400px;height:600px;"></div>
</a>
<!-- 마우스를 올려서 내용이 보이도록 하는 부분-->
<a href="#" style="text-decoration:none;"
data-inven-over-css="{'target3':{'display':'none'},'target4':{'display':'block'}}"
data-inven-out-css="{'target3':{'display':'block'},'target4':{'display':'none'}}">
<div data-inven-id="target3" style="width:400px;height:600px;">
<img src="https://upload2.inven.co.kr/upload/2015/12/21/bbs/i13734260129.png" style="width:400px;height:600px;">
</div>
<div data-inven-id="target4" style="width:400px;height:600px;">
이곳에 마격기능과 내용이 들어간다면 됩니다. 상자의 사이즈(width:가로, height:세로)는 적당히 지정해 주세요.
링크를 상자 통째로건 이유는 사용에 불편함이 없게 하기 위해서입니다.
밑줄이 뜨지 않게 스타일에는 style="text-decoration:none;" 를 추가해 주었습니다.
</div>
</a>
CSS (스타일)에서 이미지를 표시하는 방법은 배경으로 이미지를 사용하는 경우입니다.
이 경우의 스타일은 style="background-image:url(http://주소);"와 같은 형태로 넣어주실 수도 있습니다.
대신 이 경우에는 div 박스의 크기 및 배경의 크기를 조절해 주어야 합니다. 첫 번째 형태를 이와 같은 형태로 잡으면,
<a href="#"
data-inven-over-css="{'target1':{'background-image':'url(이미지 B 주소)','background-size':'400px 600px'}}"
data-inven-out-css="{'target1':{'background-image':'url(이미지 A 주소)','background-size':'400px 600px'}}">
<div data-inven-id="target1" style="width:400px;height:600px;background-image:url(이미지 A 주소-기본 이미지);background-size:400px 600px;">박스에 내용에 들어간답니다. 들어간 내용 위에 마우스를 올려야, 이미지가 변경되는 것은 조금 아쉽죠. 물론 이것도 박스 처리로 할 수는 있답니다.
</a>
조금 편법이지만, 탭 기능의 마우스 오버/아웃 스타일을 이용하는 방법도 있긴 합니다. 그건 좋은 방법이 아니라서 생략하도록 할게요.
3. 여백의 경우는 위 방법대로 만드셨다면 일단은 보이지 않을 것입니다.
도움이 되셨으면 좋겠네요. 이외에도 궁금하신 점이 있다면 언제든지 인벤 스크립트 게시판에 글 남겨주세요.
감사합니다.
Nacx
Nacx
