0

div内の画像を一方から他方に交換する2つのボタンがあるページがあります。ページが読み込まれたときに画像をdivに入れたいのですが、これが私の試みです。

脚本：

<script type="text/javascript">
function startPic(){
    document.getElementById('imageRoll').style.backgroundImage="url(balanceSheet.jpg)";
}
function changeStyle1(){
    document.getElementById("imageRoll").style.backgroundImage="url(balanceSheet.jpg)";
}
function changeStyle2(){
    document.getElementById("imageRoll").style.backgroundImage="url(incomeStatement.jpg)";
}
document.body.onload = startPic();
</script>

HTML：

<div style="width:auto; float: left;">
<div style="width:200px; height:30px; padding: 5px;"><a href="#" onmouseover="changeStyle1()"><img style="border: 0px; vertical-align:middle; padding: 5px;" onmouseover="this.src='standardButton_over.png'" onmouseout="this.src='standardButton.png'" src="standardButton.png" /></a>See balance sheet</div>
<div style="width:200px; height:30px; padding: 5px;"><a href="#" onmouseover="changeStyle2()"><img style="border: 0px; vertical-align:middle; padding: 5px;" onmouseover="this.src='standardButton_over.png'" onmouseout="this.src='standardButton.png'" src="standardButton.png" /></a>See income statement</div>
</div>
<div id="imageRoll" style="background-repeat:no-repeat; width:335px; height:465px; float: left;"></div>

上記のコードを使用すると、スワップは期待どおりに実行され、startPic関数でアラートが設定されている場合、画像埋め込み行の前にある場合は機能しますが、画像埋め込み行より下にある場合はアラートは機能しません。何らかの理由で、startPic関数の画像埋め込み行が機能しません。

4

1 に答える 1

2

イベントをアタッチするときに括弧を削除します。そうしないと、関数を呼び出してアタッチしません。

// good - attaches the function to the onload of the body
document.body.onload = startPic;
// bad - won't work as you would expect
document.body.onload = startPic();

イベントリスナーを使っていつでも何かをすることができます。何かのようなもの：

var load = function(fn){
    var d = document;
    if(d.addEventListener) {
        d.addEventListener("DOMContentLoaded", fn, false);
    } else {
        d.attachEvent("onreadystatechange", function(){
            if(d.readyState === "complete") {
                fn();
            }
        });
    }
};
load(startPic);

これはクロスブラウザで非常にうまく機能します。

于 2013-03-21T18:22:56.440 に答える