<script>
var a_top = -50;
var a_left = -50;
function yap(a){
  if(a == 1){
    a_top++;
    document.getElementById("div1").style.backgroundPosition = a_left+"px "+a_top+"px";
  }
  if(a == 2){
    a_left--;
    document.getElementById("div1").style.backgroundPosition = a_left+"px "+a_top+"px";
  }
  if(a == 3){
    a_top--;
    document.getElementById("div1").style.backgroundPosition = a_left+"px "+a_top+"px";
  }
  if(a == 4){
    a_left++;
    document.getElementById("div1").style.backgroundPosition = a_left+"px "+a_top+"px";
  }
}
</script>
Kucuk Resim:
<br/>
<div id="div1" style="border:5px solid #069;width:300px;height:300px;background:url(http://www.gulum.net/kartlari-resimleri/araba-resimleri/images/araba-resmi1.jpg) no-repeat;background-position:-50px -50px;"></div>
<div ><table>
<tr>
         <td></td>
         <td><a href="#" onclick="yap(1);return false;">Yukari</a></td>
         <td></td>
</tr>
<tr>
         <td><a href="#" onclick="yap(4);return false;">Sol</a></td>
         <td></td>
         <td><a href="#" onclick="yap(2);return false;">Sag</a></td>
</tr>
<tr>
         <td></td>
         <td><a href="#" onclick="yap(3);return false;">Asagi</a></td>
         <td></td>
</tr>
</table>
</div>
<br/><br/><br/><br/><br/>
Orjinal Resim:
<br/>
<img src="http://www.gulum.net/kartlari-resimleri/araba-resimleri/images/araba-resmi1.jpg" />