우측에 닫혔다 열렸다 하는 슬라이딩 되는 메뉴?패널? 소스를 적용했는데요.

이소스는 패널이 닫혀도 열려도 클릭버튼이 하나의 이미지인데 열렸있을때와 닫혀있을때 버튼의 이미지를 다르게 하고싶은데 아는게 없다보니 다른 소스에서 따다가 적용도 해봤는데 잘되나 싶더니 쿠키때문인지 이상해지더라구요...

아래는 다른소스에서 가져온 열림 닫힘 이미지가 다르게 되어있는 스크립트이구요.

$(function(){

 var vi = "on";
$(".box ..handle").click(function(){
       if(vi == "off"){
           $(".box").animate({"right":"0px"});
           $(".handle").html("<img src='img1.jpg'>");
           vi = "on";
       }else{
           $(".box").animate({"right":"-102px"});  // 메뉴 넓이 만큼 - 해준다.
           $(".handle").html("<img src='img2.jpg'>");
           vi = "off";
      }
 });

});

------------------------------------------------------

이 아래는 적용해놓은 슬라이딩메뉴입니다.

이 슬라이딩 메뉴에 위처럼 버튼이미지 열림 닫힘시 달라지도록 적용하려면 소스 수정을 어찌해야하는지요? ㅜ ㅜ

(function($){
    $.fn.tabSlideOut = function(callerSettings) {
        var settings = $.extend({
            tabHandle: '.handle',
            speed: 300,
            action: 'click',
            tabLocation: 'left',
            topPos: '200px',
            leftPos: '20px',
            fixedPosition: false,
            positioning: 'absolute',
            pathToTabImage: null,
            imageHeight: null,
            imageWidth: null,
            onLoadSlideOut: true                  
        }, callerSettings||{});
        settings.tabHandle = $(settings.tabHandle);

  
  if($.cookie('tabSlide') == 1 || $.cookie('tabSlide') == undefined)
   settings.onLoadSlideOut = true;
  else settings.onLoadSlideOut = false;
  

        var obj = this;
        if (settings.fixedPosition === true) {
            settings.positioning = 'fixed';
        } else {
            settings.positioning = 'absolute';
        }
       
        //ie6 doesn't do well with the fixed option
        if (document.all && !window.opera && !window.XMLHttpRequest) {
            settings.positioning = 'absolute';
        }
       

       
        //set initial tabHandle css
       
        if (settings.pathToTabImage != null) {
            settings.tabHandle.css({
            'background' : 'url('+settings.pathToTabImage+') no-repeat',
            'width' : settings.imageWidth,
            'height': settings.imageHeight
            });
        }
       
        settings.tabHandle.css({
            'display': 'block',
            'textIndent' : '-99999px',
            'outline' : 'none',
            'position' : 'absolute'
        });
       
        obj.css({
            'line-height' : '1',
            'position' : settings.positioning
        });

       
        var properties = {
                    containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
                    containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
                    tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
                    tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
                };

        //set calculated css
        if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
            obj.css({'left' : settings.leftPos});
            settings.tabHandle.css({'right' : 0});
        }
       
        if(settings.tabLocation === 'top') {
            obj.css({'top' : '-' + properties.containerHeight});
            settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
        }

        if(settings.tabLocation === 'bottom') {
            obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
            settings.tabHandle.css({'top' : '-' + properties.tabHeight});
           
        }
       
        if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
            obj.css({
                'height' : properties.containerHeight,
                'top' : settings.topPos
            });
           
            settings.tabHandle.css({'top' : 0});
        }
       
        if(settings.tabLocation === 'left') {
            obj.css({ 'left': '-' + properties.containerWidth});
            settings.tabHandle.css({'right' : '-' + properties.tabWidth});
        }

        if(settings.tabLocation === 'right') {
            obj.css({ 'right': '-' + properties.containerWidth});
            settings.tabHandle.css({'left' : '-' + properties.tabWidth});
        }

        //functions for animation events
       
        settings.tabHandle.click(function(event){
            event.preventDefault();
        });
       
        var slideIn = function() {
           
            if (settings.tabLocation === 'top') {
                obj.animate({top:'-' + properties.containerHeight},
    settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'left') {
                obj.animate({left: '-' + properties.containerWidth},
    settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'right') {
                obj.animate({right: '-' + properties.containerWidth},
    settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'bottom') {
                obj.animate({bottom: '-' + properties.containerHeight},
    settings.speed).removeClass('open');
            }   
           
        };
       
        var slideOut = function() {
           
            if (settings.tabLocation == 'top') {
                obj.animate({top:'-3px'},  settings.speed).addClass('open');
            } else if (settings.tabLocation == 'left') {
                obj.animate({left:'-3px'},  settings.speed).addClass('open');
            } else if (settings.tabLocation == 'right') {
                obj.animate({right:'-3px'},  settings.speed).addClass('open');
            } else if (settings.tabLocation == 'bottom') {
                obj.animate({bottom:'-3px'},  settings.speed).addClass('open');
            }
        };
       
        var clickAction = function(){
            settings.tabHandle.click(function(event){
                if (obj.hasClass('open')) {
                    slideIn();$.cookie('tabSlide', '0', { path: '/' });
                } else {
                    slideOut();$.cookie('tabSlide', '1', {path: '/' });
                }
            });
           
            //clickScreenToClose();
        };
       
        var hoverAction = function(){
            obj.hover(
                function(){
                    slideOut();
                },
               
                function(){
                    slideIn();
                });
               
                settings.tabHandle.click(function(event){
                    if (obj.hasClass('open')) {
                        slideIn();
                    }
                });
                //clickScreenToClose();
               
        };
       
        var slideOutOnLoad = function(){
            slideIn();
            setTimeout(slideOut, 500);
        };
       
        //choose which type of action to bind
        if (settings.action === 'click') {
            clickAction();
        }
       
        if (settings.action === 'hover') {
            hoverAction();
        }
       
        if (settings.onLoadSlideOut) {
            slideOutOnLoad();
        };
       
    };
})(jQuery);