javascript-过渡图像

Question

我已经有一段时间的过渡图像（用javascript编码）问题。 我发现了这个线程：为什么我的简单javascript滚动不起作用？ -关于完全相同的问题-我猜。 当我在Windows上的Firefox中尝试代码时，根本没有滚动效果，除了单击按钮的时间很短（只有边框将颜色更改为红色->的时间非常短）之外-图像根本不会改变...蓝色箭头-应该在鼠标悬停时更改为红色箭头，然后又变为蓝色onmouseout，但是它什么也没做。 链接工作正常。 我完全遵循（我相信）在上一个线程中针对同一问题给出的建议，但没有任何效果... javascript是如此不可预测吗？ 为什么我的代码（下面）不起作用-完全没有翻转效果？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org      /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Let's try this Roll-over effect !</title>


<script type="text/jscript" language="javascript">
//<!--
if(document.images){
    arrowout = new Image();
    arrowout.src = "./images/blueArrow.gif";
    arrowover = new Image();
    arrowover.src = "./images/redArrow.gif";
}

function move_over(elemname){
    if(document.images){
        document[elemname].src = eval(elemname + "over.src");
    }
}

function move_out(elemname){
    if(document.images){
        document[elemname].src = eval(elemname + "out.src");
    }
}
//// -->
</script>
</head>


<body>
<a style="height:82px; width:147px;" href="http://www.phuszcza.com" >
<img id="arrow" name="arrow" src="./images/blueArrow.gif"   onmouseout="move_out(this)"    
     onmouseover="move_over(this)" alt="arrow" />
</a>
</body>
</html>

Answer 1

这里有几个问题。

您正在使用旨在与Netscape兼容的代码。 现在是2013年。
您正在使用eval 。
你路过this对move_out和move_over ，但治疗elemname为字符串。
您正在初始化arrowout和arrowover并且对它们完全不执行任何操作。
您的<a>元素是内联的； 在CSS中给它一个width和height不会改变任何东西。
您正在使用JavaScript进行此操作。

改用CSS。

<a id="arrow" href="http://www.phuszcza.com">Go to some page</a>

#arrow {
    background-image: url('images/blueArrow.gif');
    display: inline-block;
    height: 82px;
    text-indent: -9999px;
    width: 147px;
}

#arrow:hover {
    background-image: url('images/redArrow.gif');
}

javascript-过渡图像

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-03-01 00:13:38

javascript-过渡图像

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-03-01 00:13:38

解决方案1
2 已采纳 2013-03-01 00:13:38