자바스크립트를 이용해 이미지를 변경 하는 방법입니다.
쇼핑몰 솔루션에서 특정 카테고리 일때 해당 카테고리를 표기 하기 위해 여러가지 고민을 하다 생각 한 방법 입니다.
쇼핑몰 솔루션의 경우 카테고리를 표기 하는 부분 대부분이 하나의 페이지로 이루어져 있습니다.
이 하나의 페이지가 여러가지 카테고리를 생성할때 다르게 보이게 해야 하는 경우가 있는데요 이때 사용했습니다.
작업을 진행한 쇼핑몰의 경우 엄청나게 많은 카테고리를 가지고 있는데요 특정 카테고리를 선택했을 때 선택 된 카테고리를 확인 가능하게 해달라는 클라이언트의 요청으로 작업을 진행 하였는데요.
먼저 쇼핑몰의 url 을 보면 http://도메인/front/php/category.php?cate_no=4 부터 시작 해서 cate_no=600 이 넘게 있었습니다.
해서 먼저 cate_no= 를 알아내고 해당 cate_no= 가 되었을 때 어떤 액션을 주기로 결정 했습니다.
자바스크립트에서 해당 url 을 알아오는 방법으로
frmUrl = location.href
varCut = frmUrl.indexOf(“?”)
varCheck = frmUrl.substring(varCut+1)
var varList = varCheck.split(“&”)
forCount = varList.length
for(i=0; i < forCount; i++)
{
eval(varList[i])
}
를 사용하였습니다.
이후 해당 url 이 맞을 경우 이미지를 변경 하라는 액션을 주어야 하는데요. 그 부분은 다음과 같이..
window.onload = function ()
{
var ioc = cate_no;
var pno = ioc;
if(ioc = pno) {
document.getElementById(pno +”_ou”).style.display = “none”;
document.getElementById(pno +”_ov”).style.display = “block”;
}
}
이렇게 스크립트를 주고 이제 카테고리 이미지 부분 작업 인데요~
<div id=”menu”>
<a href=”/front/php/category.php?cate_no=4″><img id=”4_ou” src=”/web/upload/nfn/wendyrose/menu/w_menu_out_03.jpg” border=”0″ onMouseOver=”this.src=’/web/upload/nfn/wendyrose/menu/w_menu_over_03.jpg'” onMouseOut=”this.src=’/web/upload/nfn/wendyrose/menu/w_menu_out_03.jpg'”><img id=”4_ov” style=”display:none” src=”/web/upload/nfn/wendyrose/menu/w_menu_over_03.jpg” border=”0″></div>
<div id=”menu”><a href=”/front/php/category.php?cate_no=5″><img id=”5_ou” src=”/web/upload/nfn/wendyrose/menu/w_menu_out_03.jpg” border=”0″ onMouseOver=”this.src=’/web/upload/nfn/wendyrose/menu/w_menu_over_03.jpg'” onMouseOut=”this.src=’/web/upload/nfn/wendyrose/menu/w_menu_out_03.jpg'”><img id=”5_ov” style=”display:none” src=”/web/upload/nfn/wendyrose/menu/w_menu_over_03.jpg” border=”0″></div>
이렇게 작업 했습니다.
자바스크립트를 보면 해당 url 의 cate_no 를 ico 로 지정 하였구요 그리고 pnc 를 cate_no 와 동일하게 지정 하였습니다.
그리고 이미지가 보여지는 부분에 이미지를 두개를 넣어서 평상시에는 cate_no_ou 아이디를 가진 이미지가 출력 되고 cate_no 가 있는 url 에서는 cate_no_ov 아이디를 가진 이미지를 출력 하게 하였습니다.^^
위 소스는 카페24 쇼핑몰 솔루션에서 카테고리 별로 이미지를 표기 하는 방법 인데요. url 을 알아내는 스크립트를 이용한다면 다른 쇼핑몰 또는 홈페이지에서도 충분히 사용가능 한 소스 입니다.
지금 까지는 해당 카테고리 마다 자바스크립를 만들어 소스가 엄청나게 많았는데요 이걸 간단하게 하는 방법이 없을까 생각하다 보니 간단하게 몇줄로 해결 하게 되었어요..^^
여러분도 한번 해보세요..^^
