영카트5 상품리스트 페이지에서 제품이미지 오버롤 효과를 주고 싶습니다.
본문
영카트5 상품리스트 페이지에서 제품이미지 오버롤 효과를 주고 싶습니다.
예시사이트 주소를 올립니다.
http://jellymallow.com/product/list.html?cate_no=83
원하는 내용이
제품리스트에서 상품이미지에 마우스를 오버롤 하면, 다른 이미지가 보이는 형식인데요.
제가 알기로 영카트 기본에서는 리스트에서는 이미지1 을 리스트썸네일로 불러오는 것으로 알고 있는데요.
여기에 추가로 오버롤시 이미지2를 보여준다거나 하는 식으로 구현하고 싶습니다.
도움 및 조언 부탁 드립니다.
감사합니다.
답변 2
이미지 하단에 <div class="Sct_img_layer2"><img src="롤오버이미지"></div>
그리고 style에 .sct_img_layer{display:none;position:absolute;top:0} 으로 주신 후
롤오버 스크립트 삽입하시면 될듯합니다
$(".sct_20 .sct_a").hover(function(){
$(this).children(".sct_img_layer2").stop().fadeIn();
},
function() {
$(".sct_20 .sct_a").stop();
$(this).children(".sct_img_layer2").stop().fadeOut();
});
답변을 작성하시기 전에 로그인 해주세요.