본문 바로가기

현재 위치
  1. HOME
  2. 쇼핑몰 TIP

쇼핑몰 TIP

온라인 쇼핑몰 제작부터 운영, 마케팅까지! 유용한 정보를 제공합니다.

카테고리 상세
번호 문의유형 제목
1347 로고 이미지에 마우스 오버 시 다른 로고 이미지 노출하기 조회수 6282
  • 작성일 2017-08-24 15:39:00
  • 추천 추천하기
  • 조회수 6282


두 개의 로고로 나타내는

내 쇼핑몰의 다양한 얼굴!



쇼핑몰에 접속하면 기본적으로 상단에

쇼핑몰 로고가 노출됩니다.


보통 하나의 로고를 사용하지만

때때로 두 개를 사용하는 경우가 있으시죠?


로고를 여러 개 사용하신다면 자연스럽게

다양한 로고를 노출하고 싶으실 거로 생각합니다.


그래서 준비한

'두 가지 로고를 보여주는 방법'


로고에 마우스를 올려놓을 때와 그렇지 않을 때,

각각 다른 로고가 노출되도록 설정하는 방법을 알려드리겠습니다.



01

마우스오버에 따라 다른 로고 노출하기



1. 사용할 로고 이미지 2개를 준비합니다.


     

   

              ▲ 기본 로고                                       마우스오버 시 노출될 로고     

 


2. FTP > 웹FTP에 접속합니다.


3. 내 쇼핑몰 사이트에 연결합니다.


4. '/web/upload/logo'에 준비한 로고 파일 2개를 업로드합니다.



 

6. 디자인 소스를 수정합니다.


1) 쇼핑몰 관리자 '디자인관라'에서 '쇼핑몰 디자인 수정' 버튼을 클릭합니다.



 


2) 스마트디자인 편집창에서 '전체화면보기(탭) > 레이아웃 > 기본레이아웃 > 메인레이아웃/공통레이아웃' 페이지로 이동합니다.

※ 메인레이아웃과 공통레이아웃 각 페이지에서 소스를 수정합니다.


3) 아래와 같이 소스를 수정합니다.


※ logos-a.png (기본로고) / logos-b.png (마우스오버 시 보여지는 로고)


<!-- 기존 -->
<a href="/index.html"><img src="{$logo}" alt="{$mall_name}" ></a> 

<!-- 수정 후 -->
<a href="/index.html"><img src="{$logo}" alt="{$mall_name}" onmouseover="this.src='/web/upload/logo/logos-b.png'" onmouseout="this.src='/web/upload/logo/logos-a.png'"/></a>