做动态按钮得不到想要的效果。该如何处理
日期：2014-05-16 浏览次数：20363 次
做动态按钮得不到想要的效果。
我想做个简单的动态按钮，但是运行过后得不到想要的结果，请各位高手帮忙看一下，谢谢！
我的问题：
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.wr
我想做个简单的动态按钮，但是运行过后得不到想要的结果，请各位高手帮忙看一下，谢谢！
我的问题：
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.wr
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
