-1

ロールオーバー画像 (javascript でコード化) に問題がありました。このスレッドを見つけました:シンプルな JavaScript ロールオーバーが機能しないのはなぜですか? - まったく同じ問題について - だと思います。WindowsのFirefoxでコードを試してみると、ボタンをクリックしたときの非常に短い時間を除いて、ロールオーバー効果はまったくありません（境界線のみが色を赤に変えます->非常に短い時間です）-画像はまったく変化しません...青い矢印-マウスオーバーで赤い矢印に変わり、マウスアウトで青い矢印に戻るはずですが、何もしません。ただし、リンクは正常に機能します。私は同じ問題について前のスレッドで与えられたアドバイスに正確に従っています (私は信じています) が、まったく効果はありません... 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. andに渡しますthisが、文字列として扱います。move_outmove_overelemname

  4. あなたはそれらを初期化arrowoutしarrowoverていて、まったく何もしていません。

  5. あなたの<a>要素はインラインです。CSSでwidthandをheight指定しても何も変わりません。

  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 に答える