썸네일 이미지 클릭했을 때 본문 이미지 바꾸기

<!-- BODY -->

<div class="online_box">
    <p class="img_theat"><img src="/img/introduction/img_online8_1.jpg" id="divImage"  /></p>
    <ul>
        <li><img src="/online0701_on.gif" alt="" class="btnImage" id="1" style="cursor: hand;" /></li>
        <li><img src="/online0702_off.gif" alt="" class="btnImage" id="2" style="cursor: hand;" /></li>
        <li><img src="/online0703_off.gif" alt="" class="btnImage" id="3" style="cursor: hand;" /></li>
    <  /ul>
</div>


<!-- JQUERY -->

 $('.btnImage').click(function(){
      changeImg();
      var tmpVal = $(this).attr('id');
      $(this).attr('src', $(this).attr('src').replace('off.gif','on.gif'));
      $('#divImage').attr('src', '/img/introduction/img_online8_'+tmpVal+'.jpg');
 }); 
 
    function changeImg(){
      $('.btnImage').each(function(){
        $(this).attr('src', $(this).attr('src').replace('on.gif','off.gif'));
      });
    }