스마트디자인 편집창에서 HTML을 수정하여, 상품 이미지에 마우스 오버 시 다른 이미지를 보여지게 할 수 있어요. PC만 적용되며, 모바일은 적용되지 않으니 참고해 주세요.
자세히 알아보기
상품 이미지와 다른 이미지 노출하기
- '개별 이미지 등록'을 선택하고 목록 이미지에 마우스 오버 전 이미지를, 축소 이미지에 마우스 오버 시 이미지를 각각 등록해 주세요.
Note
두 이미지 사이즈가 동일해야 마우스 오버 시 이미지가 깨지지 않아요. 이미지 등록 전 '이미지 사이즈 변경' 버튼을 클릭하여 목록 이미지와 축소 이미지 사이즈를 동일하게 맞춰 주세요.
- 메인(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">
Info
목록 이미지 변수는 {$image_medium}, 축소 이미지 변수는 {$image_small} 이에요.
자세한 사항은 [스마트디자인] 메인, 목록, 상세페이지 상품 이미지 변수의 모든 것! 을 참고해 주세요.
※ 참고 소스
<!-- 추천상품 -->
<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><!-- //추천상품 -->