关于JS的一个常见问题（在线等，请高手回答，谢谢！）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>软件UI设计下拉菜单</title>
<script language="javascript">
function hideAll() { 
  for(i=0;i<odiv.length;i++) { 
    odiv.style.display="none"; 
  } 
}  
function showObj(num)  
{ 
   
  if (odiv[num].style.display=="none")  
  { 
    odiv[num].style.display="inline"; 
  } 
  else { 
    odiv[num].style.display="none"; 
  } 
}
</script> 
<style type="text/css"> 
<!-- 
*{margin:0;padding:0;border:0;}
body{font-size:12px;font-family:"宋体", Arial, Georgia, "Times New Roman"; color:#FFF;}
#box,#box1 {width:178px; height:auto;float:left;margin:12px 0 0 12px; border:1px solid #36C;background: #39C;display:inline;}
.divctrl{cursor:hand;font-size:12px;}
ul {background:#FDFDFD;text-indent:12px;height:auto;padding:6px 0 0 0;}
li{list-style-type:none;font-size:12px;line-heigh:26px;height:26px;}
.menu_title{background:#39C; height:24px; padding:6px 0 0 6px;border-bottom:#8EC9E6 1px solid; background:url(images/2.jpg) no-repeat 155px 4px;}
.menu_title1{background:#39C;height:24px; padding:6px 0 0 6px;background:url(images/2.jpg) no-repeat 155px 4px;}
a.menu:link{color:#FFF;text-decoration:none;font-weight:bold; display:block;background:url(images/2.jpg) no-repeat 155px 4px;}
a.menu:visited{color:#333;text-decoration:none;font-weight:bold;display:inline;}
a.menu:hover{color:#000; font-weight:bold;text-decoration:none;}  
a:link{color:#FFF;text-decoration:none;}
a:visited{color:#004C84;text-decoration:none;display:block;width:178px; height:26px;}
a:hover{color: #4B62FE;background: #E2EAFE;} 
.bs {color: #FFF;}
--> 
</style> 
</head>
<body onLoad="MM_preloadImages('images/2.jpg')">
<div id="box1">
      <div onClick="showObj(0)" class="menu_title"><a href="#" class="menu"><span class="bs">*</span> 设计之家</a>
      </div>
      <div id="odiv" style="display:inline">
      <ul>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工出差申请</a></li>
        <li><a href="#">* 费用报销管理</a></li>
      </ul>
      </div>
      <div onClick="showObj(1)" class="menu_title"><a href="#" class="menu"><span class="bs">*</span> 员工管理</a></div>
      <div id="odiv" style="display:none">
      <ul>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工出差申请</a></li>
        <li><a href="#">* 费用报销管理</a></li>
      </ul>
      </div>
      <div onClick="showObj(2)" class="menu_title"><a href="#" class="menu"><span class="bs">*</span> 员工管理</a></div>
      <div id="odiv" style="display:none"> 
        <ul>
       <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工出差申请</a></li>
        <li><a href="#">* 费用报销管理</a></li>
      </ul>
      </div>
      <div onClick="showObj(3)" class="menu_title"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
      <div id="odiv" style="display:none">
        <ul>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工出差申请</a></li>
        <li><a href="#">* 费用报销管理</a></li>
      </ul>
      </div>
      <div onClick="showObj(4)" class="menu_title"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
      <div id="odiv" style="display:none">
        <ul>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工出差申请</a></li>
        <li><a href="#">* 费用报销管理</a></li>
      </ul>
      </div>
      <div onClick="showObj(5)" class="menu_title"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
      <div id="odiv" style="display:none">
        <ul>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工出差申请</a></li>
        <li><a href="#">* 费用报销管理</a></li>
      </ul>
      </div>
      <div onClick="showObj(6)" class="menu_title"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
      <div id="odiv" style="display:none">
        <ul>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工出差申请</a></li>
        <li><a href="#">* 费用报销管理</a></li>
      </ul>
      </div>
      <div onClick="showObj(7)" class="menu_title1"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
      <div id="odiv" style="display:none">
        <ul>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工考勤信息</a></li>
        <li><a href="#">* 员工出差申请</a></li>
        <li><a href="#">* 费用报销管理</a></li>
      </ul>
      </div>
</div>
</body>
</html>  请问，浏览的时候，不点击每个栏目的时候，右边的图片不变，当点击栏目后，右边图片 垂直翻转 90度。如何实现这样的效果？希望高手回答我，谢谢！