javascript-過渡圖像

Question

我已經有一段時間的過渡圖像（用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>

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 個解決方案

解決方案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