[Lord_Jesus_]

var imgs = new Array("img1.png", "img2.png", "img3.png");
function sh_img(a) {
 
 
    var obj = document.getElementById("img");
        obj.src = imgs[a];
 
 
  }

<nav>
    <a href="ссылка.php"  onMouseOver="sh_img(1)" onMouseOut="sh_img(0);">текст</a>
        <a href="ссылка2.php"  onMouseOver="sh_img(2)" onMouseOut="sh_img(0);">текст2</a>
    
  </nav>
  <div>
  <img src=""img1.png" id="img">
  </div>

При наведении на ссылку появляется изображение соответствующей ссылки, если вне диапазона ссылки то используеться картинка по умолчанию
Подскажите пожалуйста как теперь сделать чтобы изображение менялось плавно...

Пробовал сделать так...

var imgs = new Array("img1.png", "img2.png", "img3.png");
function sh_img(a) {
 
       $('#img').animate({'opacity': 0}, 500).hide();
    var obj = document.getElementById("img");
        obj.src = imgs[a];
 
       $('#img').show().animate({'opacity': 1}, 500);
  }

это конечно неправильно,и работает не корректно и говорит о том что у меня нехватка знаний, подскажите пожалуйста как нужно правильно все это реализовать,,,