На сайте fiesta-2000.com есть верху кнопки навигации при наведении на них они должны меняться, они меняются, но остальные кнопки прыгают, почему так?надеюсь на вашу помощ!

JQ кнопок

$('#top_but img').mouseover(function(){
	id = $(this).attr('id');
	
	$('#td_but').css('heigth', '300px');
	
	if(id == 'index'){i=1}
	if(id == 'about_us'){i=2}
	if(id == 'services'){i=3}
	if(id == 'articles'){i=4}
	if(id == 'contact'){i=5}
	
	$("#" + id).mouseover(function(){
		$(this).attr("src", "../images/button/but_2/but" + i + ".jpg");
	}).mouseout(function(){
		$(this).attr("src", "../images/button/but_1/but" + i + ".jpg");
		
	}).mousedown(function(){
		$(this).attr("src", "../images/button/but_3/but" + i + ".jpg");
	}).mouseup(function(){
		$(this).attr("src", "../images/button/but_2/but" + i + ".jpg");
	})

	
	
	})

сами кнопки

 <tr>
      <td align="left" colspan="3">
      	<img src="../images/header.jpg" width="340" height="178" alt="Фиеста-2000" />
      </td>
  </tr>
  <tr>
    <td valign="top" id="td_but" colspan="3" background="../images/button/back_but.jpg">
    <div align="center" id="top_but">
    <a href="../index.php"><img src="../images/button/but_1/but1.jpg" id="index"/></a>
    <a href="../about_us.php"><img src="../images/button/but_1/but2.jpg" id="about_us"/></a>
    <img src="../images/button/but_1/but3.jpg" id="services" />
    <a href="../articles.php"><img src="../images/button/but_1/but4.jpg" id="articles" /></a>
    <a href="../contact.php"><img src="../images/button/but_1/but5.jpg" id="contact" /></a>
    </div>
    <div id="form_search">
    <form action="search.php"  method="get">
    <input name="search" value="<?php echo $search; ?>"  type="search" id="search" onkeyup="getRequestSearch()" onclick="clicker()" />
    <input type="submit" style="background:url(../images/button/Untitled-4_13.jpg); width:57px; height:20px; cursor:pointer;" value="&nbsp"> 
    <input type="hidden" name="sub" value="sub">
    </form>
    </div>
    
    </td>
  </tr>