javascript - 翻转图像

-1

我一直有一个问题，翻转图像（javascript编码）已经有一段时间了。我发现这个线程：Why doesnt my simple javascript rollover work? - 关于完全相同的问题 - 我猜。当我在Windows上的Firefox中尝试代码时 - 除非在很短的时间内点击按钮（仅在非常非常短的时间内将颜色改为红色 - >），否则根本不会有翻滚效果 - 图像根本不会改变......蓝色箭头 - 应该在鼠标悬停时切换为红色箭头，并返回蓝色鼠标，但它什么都不做。链接工作正常。我完全遵循（我相信）在上一个线程中给出的同样问题的建议，但根本没有效果...... JavaScript是如此不可预测？为什么我的代码（下文）不起作用 - 完全没有翻滚效果？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>

来源

2013-03-01 Pawel Huszcza

这里有几个问题。

您使用的是与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'); 
}

来源

2013-03-01 00:13:38 Ryan

JScript是微软，而不是Netscape的。 – AlienWebguy 2013-03-01 00:16:23

@AlienWebguy：哦，我想'如果（document.images）'是Netscape的兼容性代码。我的错。当时没有活着;） – Ryan 2013-03-01 00:17:31

我们在俄勒冈小道上使用过拨号。在连接之前，有些人会死于痢疾。当时它也被称为DHTML。 – AlienWebguy 2013-03-01 00:19:48

javascript - 翻转图像

回答

相关问题