做动态按钮得不到想要的效果。

我想做个简单的动态按钮，但是运行过后得不到想要的结果，请各位高手帮忙看一下，谢谢！我的问题：
     1。我想要的效果是鼠标指向按钮时，按钮为下凹效果，即ＣＳＳ格式中的.new效果，鼠标移开时，按钮为上凸效果,即格式中的.origin效果．但运行的时候不能实现这个效果．
　　２．链接是指向HTTP的，为什么运行的时候是指向本机的，而不是指向该网站？<html>
<head>
<title>动态按钮实例</title>
</head><style type="text/css">
a.TButton
　{color:black;font:11pt;text-decoration:none}
.origin
　{border:outset 2px;width:100;height:24;background-image:url(background.gif);text-align:center}
.new
　{border:inset 2px;width:100;height:24;background-corlor:#eeeeee;text-align:center}
</style><script type="text/javascript">
 buttons=new Array();
 buttons[0]=new Button("Microsoft","http//www.microsoft.com");
 buttons[1]=new Button("Amazon","http//www.amazon.com");
 buttons[2]=new Button("Yahoo","http//www.yahoo.com/");
 buttons[3]=new Button("ChinaByte","http//www.chinabyte.com/");
 
function Button(title,link){
 this.title=title;
 this.link=link;
 }
 
function putButtonHere(){ 
  document.write('<center>');
  document.write('<table border="0" cellpadding="0" cellspacing="0">');
  document.write('<tr>');
  for(var i=0;i<buttons.length;i++)
  {
   document.write('<td>');
   document.write('<span id=butttons'+i+' class="origin" onmouseover=buttons[i].className="new" 　　onmouseout=buttons[i].className="origin">');
   document.write('<a class="TButton" href="'+buttons[i].link+'">' + buttons[i].title);
   document.write('</a');
   document.write('</span>');
   document.write('</td>');
  }
  document.write('</tr>');
  document.write('</table>');
 }</script>
</head>
<body>
<script type="text/javascript">putButtonHere()</script>
</body>
</html> 

解决方案 »

  1.   

    有几种方法
    1，用超链接标签<a></a>
    2,用onmouseover事件 与 onmouseout事件
      

  2.   

    <html>
    <head>
    <title>动态按钮实例</title>
    </head><style type="text/css">
    a.TButton
    　{color:black;font:11pt;text-decoration:none}
    .origin
    　{border:outset 2px;width:100;height:24;background-image:url(background.gif);text-align:center}
    .new
    　{border:inset 2px;width:100;height:24;background-corlor:#eeeeee;text-align:center}
    </style><script type="text/javascript">
     buttons=new Array();
     buttons[0]=new Button("Microsoft","http//www.microsoft.com");
     buttons[1]=new Button("Amazon","http//www.amazon.com");
     buttons[2]=new Button("Yahoo","http//www.yahoo.com/");
     buttons[3]=new Button("ChinaByte","http//www.chinabyte.com/");
     
    function Button(title,link){
     this.title=title;
     this.link=link;
     }
     
     function changeNew(obj){
    obj.className = "new";
     }
     function changeOrigin(obj){
    obj.className = "origin";
     }
     
    function putButtonHere(){ 
      document.write('<center>');
      document.write('<table border="0" cellpadding="0" cellspacing="0">');
      document.write('<tr>');
      for(var i=0;i<buttons.length;i++)
      {
      document.write('<td>');
      document.write('<span id="butttons'+i+'" class="origin" onmouseover="changeNew(this)" onmouseout="changeOrigin(this)">');
      document.write('<a class="TButton" href="'+buttons[i].link+'">' + buttons[i].title);
      document.write('</a');
      document.write('</span>');
      document.write('</td>');
      }
      document.write('</tr>');
      document.write('</table>');
     }</script>
    </head>
    <body>
    <script type="text/javascript">putButtonHere()</script>
    </body>
    </html>
      

  3.   

    把span标签放到a标签里面<style type="text/css">
    a.TButton
    　{color:black;font:11pt;text-decoration:none;
    　border:outset 2px;width:100;height:24;background-image:url(background.gif);text-align:center}
    a:hover.TButton　{border:inset 2px;background-corlor:#eeeeee;}
    </style>或者直接这样..
      

  4.   


    buttons=new Array();
     buttons[0]=new Button("Microsoft","http//www.microsoft.com");
     buttons[1]=new Button("Amazon","http//www.amazon.com");
     buttons[2]=new Button("Yahoo","http//www.yahoo.com/");
     buttons[3]=new Button("ChinaByte","http//www.chinabyte.com/");
     
    function Button(title,link){
     this.title=title;
     this.link=link;
     }
      
     function changeNew(obj){
    obj.className = "new";
     }
     function changeOrigin(obj){
    obj.className = "origin";
     }
     
    function putButtonHere(){  
      document.write('<center>');
      document.write('<table border="0" cellpadding="0" cellspacing="0">');
      document.write('<tr>');
      for(var i=0;i<buttons.length;i++)
      {
      document.write('<td>');
      document.write('<span id="butttons'+i+'" class="origin" onmouseover="changeNew(this)" onmouseout="changeOrigin(this)">');
      document.write('<a class="TButton" href="'+buttons[i].link+'">' + buttons[i].title);
      document.write('</a');
      document.write('</span>');
      document.write('</td>');
      }
      document.write('</tr>');
      document.write('</table>');
     }只能保证不报错，但是没有什么效果