Question

我已经有一段时间翻滚图像（用javascript编码）的问题。我找到了这个帖子：Why doesnt my simple javascript rollover work? - 关于完全相同的问题 - 我想。当我在Windows上的Firefox中尝试代码时 - 根本没有翻转效果，除了我点击按钮的非常短暂的时间段（只有边框将颜色变为红色 - ＆gt;非常非常短的时间） - 图像根本不会改变...蓝色箭头 - 应该在鼠标悬停时更改为红色箭头并返回蓝色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 个答案: