javascript-过渡图像

Question

I have been having a problem with roll-over image (coded in javascript) for a while already. 我已经有一段时间的过渡图像（用javascript编码）问题。 I have found this thread: Why doesnt my simple javascript rollover work? 我发现了这个线程：为什么我的简单javascript滚动不起作用？ - about exactly the same problem - I guess. -关于完全相同的问题-我猜。 When I try the code in Firefox on Windows - there is simply no roll-over effect, except for a very brief period of time when I click the button (only borders change colour to red -> for a very, very short time) - image does not change at all... Blue arrow - supposed to change to red arrow on mouseover and back to blue onmouseout but it does nothing. 当我在Windows上的Firefox中尝试代码时，根本没有滚动效果，除了单击按钮的时间很短（只有边框将颜色更改为红色->的时间非常短）之外-图像根本不会改变...蓝色箭头-应该在鼠标悬停时更改为红色箭头，然后又变为蓝色onmouseout，但是它什么也没做。 Link works fine though. 链接工作正常。 I have followed exactly (I believe) advice given in the previous thread on the same problem, but no effect at all... Is javascript so unpredictable? 我完全遵循（我相信）在上一个线程中针对同一问题给出的建议，但没有任何效果... javascript是如此不可预测吗？ Why my code (below) doesn't work - living no roll-over effect at all? 为什么我的代码（下面）不起作用-完全没有翻转效果？

<!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

There are several problems here. 这里有几个问题。

You are using code designed for compatibility with Netscape. 您正在使用旨在与Netscape兼容的代码。 It is now 2013. 现在是2013年。
You are using eval . 您正在使用eval 。
You passing this to move_out and move_over , but treating elemname as a string. 你路过this对move_out和move_over ，但治疗elemname为字符串。
You're initializing arrowout and arrowover and doing absolutely nothing with them. 您正在初始化arrowout和arrowover并且对它们完全不执行任何操作。
Your <a> element is inline; 您的<a>元素是内联的； giving it a width and height in CSS won't change anything. 在CSS中给它一个width和height不会改变任何东西。
You are doing this with JavaScript. 您正在使用JavaScript进行此操作。

Use CSS instead. 改用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