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 - 翻轉圖像

回答

相關問題