메인, 상품 목록에서 상품이미지를 마우스 오버 했을때 다른 이미지로 보여지게 하는 방법
메인, 목록에서 보여지는 상품이미지를 2가지 형태로 보여줄 수 있는 유용한 팁 입니다.
-mouseover1.jpg)
1. 상품관리 > 상품목록에서 진열할 상품을 선택한 뒤 두가지 이미지를 등록합니다.
기본 목록 이미지는 "medium(목록)" 이므로 "small(축소)"에 오버시 노출시킬 이미지를 등록해보겠습니다.
상품 이미지 변수 팁 참고: 바로가기
이미지 정보에서 "개별이미지 등록" 을 선택하고, 목록과 축소 이미지에 이미지를 등록합니다.
이 때, 이미지가 자동 리사이징 되므로 오버시 작은 이미지로 노출될 수 있기 때문에 "이미지 사이즈 변경"에서 목록이미지와 축소 이미지의 사이즈를 동일하게 맞춰주세요!
※두개의 이미지 사이즈가 동일해야 오버시 이미지가 깨지지 않습니다.
2. 디자인 편집창 > 메인(index.html), 상품분류(list.html) 페이지를 열고 소스를 수정합니다.
상품이미지를 노출시키는 이미지 태그에 (onmouseover="this.src='{$image_small}'" onmouseout="this.src='{$image_medium}'" ) 를 추가합니다.
메인, 상품분류 둘다 수정 방법은 동일합니다.
[변경 전]
<img src="{$image_medium}" id="{$image_medium_id}" alt="" class="thumb" />
[변경 후]
<img src="{$image_medium}" onmouseover="this.src='{$image_small}'" onmouseout="this.src='{$image_medium}'" alt="" class="thumb">
참고 소스
<!-- 추천상품 -->
<div module="product_listmain_1">
<!--@css(/css/module/product/listmain_1.css)-->
<!--
$count = 8
$basket_result = /product/add_basket.html
$basket_option = /product/basket_option.html
-->
<h2><span>{$category_title_text}</span></h2>
<ul class="prdList column4">
<li class="item" id="anchorBoxId_{$product_no}">
<div class="box">
<a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" onmouseover="this.src='{$image_small}'"onmouseout="this.src='{$image_medium}'" alt="" class="thumb"></a>
<div class="status">
<div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons}</div>
<div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>
</div>
중간 생략
<ul class="prdList column4">
<li class="item" id="anchorBoxId_{$product_no}">
<div class="box">
<a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}"onmouseover="this.src='{$image_small}'"onmouseout="this.src='{$image_medium}'" alt="" class="thumb"></a>
중간 생략
</ul>
</div><!-- //추천상품 -->
