-1

我已经有一段时间遇到翻转图像（用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>
4

1 回答 1

2

这里有几个问题。

  1. 您正在使用为与 Netscape 兼容而设计的代码。现在是 2013 年。

  2. 您正在使用eval.

  3. 您传递this给move_outand move_over，但将elemname其视为字符串。

  4. 您正在初始化arrowout并且arrowover对它们完全没有做任何事情。

  5. 你的<a>元素是内联的；在 CSS 中给它一个widthandheight不会改变任何东西。

  6. 您正在使用 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');
}
于 2013-03-01T00:13:38.403 回答