주 콘텐츠로 건너뛰기

상품 이미지에 마우스오버 시 다른 이미지 노출시키는 방법

스마트디자인 편집창에서 HTML을 수정하여, 상품 이미지에 마우스 오버 시 다른 이미지를 보여지게 할 수 있어요. PC만 적용되며, 모바일은 적용되지 않으니 참고해 주세요.

자세히 알아보기

상품 이미지와 다른 이미지 노출하기

  1. [관리자] 상품 > 상품목록 에서 '상품 수정창 > 이미지 정보 > 이미지 등록'으로 이동해 주세요.

  2. '개별 이미지 등록'을 선택하고 목록 이미지에 마우스 오버 전 이미지를, 축소 이미지에 마우스 오버 시 이미지를 각각 등록해 주세요.
     

    Note

    두 이미지 사이즈가 동일해야 마우스 오버 시 이미지가 깨지지 않아요. 이미지 등록 전 '이미지 사이즈 변경' 버튼을 클릭하여 목록 이미지와 축소 이미지 사이즈를 동일하게 맞춰 주세요.



  3. [관리자] 디자인 > 디자인 보관함 에서 스마트디자인 스킨의 '편집' 버튼을 클릭하여 스마트디자인 편집창을 열어 주세요.

  4. 메인(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><!-- //추천상품 -->
이 페이지가 도움이 되었나요?
현재 콘텐츠