做动态按钮得不到想要的效果。
我想做个简单的动态按钮，但是运行过后得不到想要的结果，请各位高手帮忙看一下，谢谢！
我的问题：
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>
[解决办法]
<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>
[解决办法]
把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>
或者直接这样..
[解决办法]
- JScript code
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>'); }