谁能帮我把这个格式改成点击年份然后切换到相应的图片啊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>滚动菜单</title>  
<style>  
ul{margin:0;padding:0;list-style:none;width:100000px;margin-bottom:7px;}  
#img ul{ padding-left:6px; padding-top:84px;}
#img li{margin:0;padding:0;width:709px;height:360px;display:block;float:left;margin-right:5px;}  
#img_bag{width:709px;height:360px;margin:0 auto;}  
#img_bag a{float:left;width:20px;display:block;height:20px;font-weight:bold;}  
#img_bag #img{width:720px;height:600px;overflow:hidden;float:left; margin-left:5px; margin-right:5px;}  
#scrollBar{width:724px;height:41px; background-image:url(../images/img_111.gif);position:relative}  
#scroll{width:22px;height:10px;background-image:url(../images/01_05_03.gif); background-repeat:no-repeat;cursor:pointer;position:absolute;}
#zm{ padding-top:20px; padding-left:24px;background-repeat:no-repeat;position:absolute; font-size:12px;}
.zm_1{ padding-left:45px; font-size:12px;}
.bj_1{ background:url(../images/xiangkuang.gif);background-repeat:no-repeat;}
.zs{ font-size:12px;}
.zs_1{ font-size:12px;}
.zs_2{ font-size:12px;}
.ziti{ font-size:22px;}
.tupian{ padding-left:28px; padding-top:22px;}
</style>  
</head>  
<body>  
<div id="img_bag">
<div id="img"> 
<ul>  
<li class="bj_1">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr valign="bottom" style="font-weight:900; font-family:Microsoft YaHei">
   <td><div class="tupian"><img src="../images/img_About/11997.gif" width="343" height="296" /></div></td>
    <td></td>
  </tr>
</table></li>  
<li class="bj_1">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr valign="bottom" style="font-weight:900;font-family:Microsoft YaHei">
   <td><div class="tupian"><img src="../images/img_About/1998.gif" width="343" height="296" /></div></td>
    <td>
    </td>
    </tr>
</table></li> 
<li class="bj_1">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr valign="bottom" style="font-weight:900;font-family:Microsoft YaHei">
   <td><div class="tupian"><img src="../images/img_About/2001.gif" width="343" height="296" /></div></td>
    <td>
    </td>
    </tr>
</table></li> 
<li class="bj_1">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr valign="bottom" style="font-weight:900;font-family:Microsoft YaHei">
   <td><div class="tupian"><img src="../images/img_About/2005.gif" width="343" height="296" />
   </div></td>
    <td>
    </td>
    </tr>
</table></li>
<li class="bj_1">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr valign="bottom" style="font-weight:900;font-family:Microsoft YaHei">
   <td><div class="tupian"><img src="../images/img_About/2008.gif" width="343" height="296" />
   </div></td>
    <td>
    </td>
    </tr>
</table></li> 
<li class="bj_1">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr valign="bottom" style="font-weight:900;font-family:Microsoft YaHei">
   <td><div class="tupian"><img src="../images/img_About/2009.gif" width="343" height="296" />
   </div></td>
    <td>
    </td>
    </tr>
</table></li>    
</ul>  
</div>
  <div id="scrollBar">
    <div id="zm">1997年<span class="zm_1">1998年</span><span class="zm_1">2001年</span><span class="zm_1">2005年</span><span class="zm_1">2008年</span><span class="zm_1">2009年</span></div>  
  <div id="scroll" style="left:0;"></div>  
</div> 
</div>  
<div style="clear:both;"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr valign="bottom">
    <td>&nbsp;</td>
  </tr>
</table>
<script>  
function $(obj){return document.getElementById(obj)}  
var maxWidth=$("img").getElementsByTagName("ul")[0].getElementsByTagName("li").length*105;  
var isScroll=false;  
var modiLeft;  
$("scroll").onmousedown=function(evt){  
isScroll=true;  
evt=(evt)?evt:((window.event)?window.event:null);  
if(evt.offsetX){  
modiLeft=parseInt(evt.offsetX)  
}  
else{modiLeft=parseInt(evt.layerX)}  
}  
document.onmouseup=function(){  
isScroll=false;  
}  
document.onmousemove=function(evt){  
evt=(evt)?evt:((window.event)?window.event:null);  
if(evt&&isScroll){  
$("scroll").style.left=parseInt(evt.clientX)-parseInt($("scrollBar").offsetLeft)-modiLeft+"px";  
if(parseInt($("scroll").style.left)<0){$("scroll").style.left=0+"px"}  
if(parseInt($("scroll").style.left)>704){$("scroll").style.left=704+"px"}  
$("img").scrollLeft=parseInt($("scroll").style.left)*((maxWidth+2940)/704);  
  }  
}  
</script>
</body>  
</html> 这里是代码