3

2 つの画像に対する JavaScript ホバー機能で問題が発生しています。ユーザーが矢印の画像にカーソルを合わせると、その画像のホバー バージョンに変わります。ユーザーがそれをクリックすると、別の JavaScript 関数が開始され、下のタブが展開/折りたたまれます。ライブ会場はこちら。問題は、ナビゲーションの下の右側にある矢印にあります。

最初はHTMLコードのみでこれをやろうとしました（onMouseOverとonMouseOut、そして別の画像をロードするだけです）が、ユーザーが最初の矢印、次に2番目の矢印にカーソルを合わせ、最初の矢印に戻り、次に2番目の矢印にカーソルを合わせた場合、厄介なバグが発生しました完全に消えるでしょう。

代わりに JavaScript を試してみましたが、最初の矢印しか見えず、その右側にカーソルを合わせると消えてしまいます。

厄介な部分は、ローカルサーバーからは完全に正常に機能しますが、Web サーバーでは機能しないことです. 私はこれまで HTML/Javascript をあまり使用したことがなく、JQuery も使用したことがありません。これがそのようなもので簡単に解決できる場合、その方法についての助けに本当に感謝しています. CSS の背景を持ついくつかのソリューションを読みましたが、画像はボタンとしても機能する必要があるため、機能するとは思いませんか?

画像を変更するためのJSコードは次のとおりです

var images= new Array();
images[0] = "img/ArrowDown.png";
images[1] = "img/ArrowDownHover.png";
images[2] = "img/ArrowUp.png";
images[3] = "img/ArrowUpHover.png";

function DownChange()
{
    document.getElementById("expandAll").src = images[1];
}

function DownGoBack()
{
    document.getElementById("expandAll").src = images[0];
}

function UpChange()
{
    document.getElementById("collapseAll").src = images[3];
}

function UpGoBack()
{
    document.getElementById("collapseAll").src = images[2];
}

ここにHTMLコードがあります

<div id="collapse"> 
    <img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange()" onMouseOut="DownGoBack()" onClick="openAll()"></img>
    <img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange()" onMouseOut="UpGoBack()" onClick="closeAll()"></img>
</div>
4

2 に答える 2

2

ローカル マシンで動作している場合、問題は JS に起因するものではありません。

私が推測する問題は、Web サーバーで画像が正しく参照されていないことです。ローカル マシンとリモート マシンの両方でサーバー ルートからの明示的なパスを使用してみてください。また、両方のマシンが互いのフォルダー構造をミラーリングするようにしてください。

于 2012-12-14T11:41:23.977 に答える
1

img タグには、</ img> のような終了ペアはありません。このコードを試してください

<div id="collapse"> 
    <img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange();" onMouseOut="DownGoBack();" onClick="openAll();" />
    <img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange();" onMouseOut="UpGoBack();" onClick="closeAll();" />
</div>

それでもうまくいかない場合は、画像が正しいフォルダーにあるかどうか、または画像の名前が正しいかどうかを確認してください。

編集：

私はこのコードを使用し、mozilla firefox と IE 6 で正常に動作しました -

<script type="text/javascript">
<!--
var images= new Array();
images[0] = "img/ArrowDown.png";
images[1] = "img/ArrowDownHover.png";
images[2] = "img/ArrowUp.png";
images[3] = "img/ArrowUpHover.png";

function DownChange()
{
    document.getElementById("expandAll").src = images[1];
}

function DownGoBack()
{
    document.getElementById("expandAll").src = images[0];
}

function UpChange()
{
    document.getElementById("collapseAll").src = images[3];
}

function UpGoBack()
{
    document.getElementById("collapseAll").src = images[2];
}
-->
</script>


<div id="collapse"> 
    <img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange();" onMouseOut="DownGoBack();" onClick="openAll();" />
    <img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange();" onMouseOut="UpGoBack();" onClick="closeAll();" />
</div>
于 2012-12-14T12:14:38.873 に答える