[cafe24] 카페24 상품 이미지 섬네일 마우스오버 설정하기

 

 

 

카페24 쇼핑몰 제작 시 상품 섬네일에 마우스를 가져갔을 때 다른 이미지를 보여주는 방법을 공유하도록 하겠습니다.

 

※ 상품관리

1_상품관리 > 상품목록에 들어가서 상품등록 or 진열 상품을 클릭해서 들어갑니다.

2_하단에 이미지 정보로 이동합니다.

3_개별이미지등록을 클릭합니다.

4_이미지 사이즈 변경을 클릭하여 목록 이미지, 축소 이미지 사이즈를 추가하려는 이미지 사이즈에 맞게 수정해줍니다.

5_기본 상품 섬네일 이미지는 목록(medium) 이미지 입니다. 축소(small)에 마우스오버 시 노출될 이미지를 등록해 주세요.

 

 

※디자인관리

1_디자인관리에 들어가서 적용 중인 스킨에 수정을 클릭합니다.

2_상품분류 (list.html) 페이지를 열어주세요.

3_상품 이미지 노출 태그를 수정해 줍니다.

<!-- 
(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">