这种特效如何实现？

<html>
<head>
<script type="text/javascript">
function EC(TheTR, img){
  var DataTR = eval("document.all." + TheTR);
  if (DataTR.style.display == "block" || DataTR.style.display == "") {
    DataTR.style.display = "none";
    if(img!=null){
      img.src = "加号图片所在位置";
      img.alt = "展开"
    }
  }
  else  {
    DataTR.style.display = "block";
    if(img!=null){
      img.src = "减号图片所在位置";
      img.alt = "收缩";
    }
  }
}
</script>
</head>
<body>
<table width="190" align="center" cellpadding="0" cellspacing="0">
      <tr>
            <td height="10" colspan="2">            </td>
          </tr>
          <tr class="colHeaderLT" onclick="javascript:EC('Guide',Tree);" style="cursor:hand">
            <td>              &nbsp;
              <img src="标志图片" alt="收缩"/>
              <b>向导</b>
            </td>
            <td width="15">
              <img id="Tree" src="减号图片所在位置" alt="收缩"/>
            </td>
          </tr>
        </table>
        <table class="XPListItem" align="center" width="190" id="Guide" style="display:block">
          <tr>
            <td height="5">新闻 rjwiqruiewqreiwoq urewo qurewoiqru ow           </td>
          </tr>
        </table>
</body>
</html>
点向导收缩,再点展开,加号和减号是两张图片