上下光标移动选定图片

<! 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 > ...  
#chaborder td{...}{ 
 width:200px;height:200px;text-align:center 
} 
#chaborder a{...}{ 
  display:block; width:200px;height:200px;OVERFLOW: hidden; cursor:default; 
} 
#chaborder a:hover{...}{width:198px;height:198px;border:1px solid #f00} 
#chaborder img{...}{border:0} 
.ahover{...}{width:198px;height:198px;border:1px solid #f00}
.aout{...}{display:block; width:200px;height:200px;OVERFLOW: hidden; cursor:default; }
body {...}{ 
background-color: #00CC00; 
} 
</ style >  
< script  type ="text/javascript" > ...
    function MoveCursor(obj)...{
        var row = parseInt(obj.id.substring(1,2));
        var col = parseInt(obj.id.substring(2,3));
        //alert(event.keyCode)
        switch(event.keyCode)...{
            case 37:
                if(col > 1)
                    col--;
                break;
            case 38:
                if(row > 1)
                    row--;
                break;
            case 39:
                if(col < 3)
                    col++;
                break;
            case 40:
                if(row < 3)
                    row++;
                break;
            case 13:
                //alert(obj.id);//如果要其他属性改属性名即可，也可以调用函数传递对象或属性名到其他地方去处理
                break;
        }
        obj = document.getElementById("a" + row.toString() + col.toString());
        obj.click();
        obj.focus();
        obj.className = "ahover";
        status = obj.innerText;
    }
</ script >
</ head >  
< body >  
< table  width ="600"  border ="0"  cellspacing ="0"  cellpadding ="0" >  
    < tr >  
      < td  height ="600" >   < table  width ="600"  border ="0"  cellspacing ="0"  cellpadding ="0"  id ="chaborder" >  
        < tr >  
          < td >   < a  id ="a11"  href ="#"  onmouseover ="this.focus();"  onkeydown ="MoveCursor(this);"  onblur ="this.className='aout'" > 00 </ a >   </ td >  
          < td >   < a  id ="a12"  href ="#"  onmouseover ="this.focus();"  onkeydown ="MoveCursor(this);"  onblur ="this.className='aout'" > 11 </ a >   </ td >  
          < td >   < a  id ="a13"  href ="#"  onmouseover ="this.focus();"  onkeydown ="MoveCursor(this);"  onblur ="this.className='aout'" > 22 </ a >   </ td >  
        </ tr >  
        < tr >  
          < td >   < a  id ="a21"  href ="#"  onmouseover ="this.focus();"  onkeydown ="MoveCursor(this);"  onblur ="this.className='aout'" > 33 </ a >   </ td >  
          < td >   < a  id ="a22"  href ="#"  onmouseover ="this.focus();"  onkeydown ="MoveCursor(this);"  onblur ="this.className='aout'" > 44 </ a >   </ td >  
          < td >   < a  id ="a23"  href ="#"  onmouseover ="this.focus();"  onkeydown ="MoveCursor(this);"  onblur ="this.className='aout'" > 55 </ a >   </ td >  
        </ tr >  
        < tr >  
          < td >   < a  id ="a31"  href ="#"  onmouseover ="this.focus();"  onkeydown ="MoveCursor(this);"  onblur ="this.className='aout'" > 66 </ a >   </ td >  
          < td >   < a  id ="a32"  href ="#"  onmouseover ="this.focus();"  onkeydown ="MoveCursor(this);"  onblur ="this.className='aout'" > 77 </ a >   </ td >  
          < td >   < a  id ="a33"  href ="#"  onmouseover ="this.focus();"  onkeydown ="MoveCursor(this);"  onblur ="this.className='aout'" > 88 </ a >   </ td >  
        </ tr >  
      </ table >   </ td >  
    </ tr >  
</ table >  
</ body >  
</ html >