0

複数のページを (個別の HTML ファイルとしてではなく) レイヤーとして含む Web サイトがあります。

私は3つの画像を持っています:

<img src="image1.png" onclick="showlayer(1);return false;" />
<br />
<img src="image2.png" onclick="showlayer(2);return false;" />
<br />
<img src="image3.png" onclick="showlayer(3);return false;" />

画像をクリックすると、関連するレイヤーが表示され、他のレイヤーは非表示になります。

表示されているレイヤーに応じて、画像を image1_active.png / image2_active.png / image3_active.png に変更することも必要です(onclickイベントハンドラー経由ではありません)。

onclick イベント ハンドラー経由ではないのはなぜですか?...

レイヤー 1 は CSS でデフォルトで表示されるように設定されているため、image1 もデフォルトで image1_active.png にする必要があります。ユーザーはまだ何もクリックする必要がないため、レイヤーの表示/非表示を検出するためにイメージ スイッチが必要です。画像を変更します。

showlayer スクリプトは次のとおりです。

function showlayer(n){
    for(i=1;i<=3;i++){
        document.getElementById("layer"+i).style.display="none";
        document.getElementById("layer"+n).style.display="block";
    }
}

このスクリプトをこの目的に適合させることは可能ですか?

ありがとうございました

4

2 に答える 2

0

次のように、画像に ID を追加できます。

<img src="image1.png" onclick="showlayer(1);return false;" id="image1" />
<br />
<img src="image2.png" onclick="showlayer(2);return false;" id="image2" />
<br />
<img src="image3.png" onclick="showlayer(3);return false;" id="image3" />

次に、現在のスクリプトでアクティブな画像を次のように設定します。

function showlayer(n){
    for(i=1;i<=3;i++){
        document.getElementById("layer"+i).style.display="none";
        document.getElementById("layer"+n).style.display="block";
        document.getElementById("image"+n).src = 'image' + n + '_active.png';
    }
}
于 2012-12-16T05:16:47.647 に答える
0 
document.onload = function(){
    showlayer(1);
}

function showlayer(n){
    var range = [1, 2, 3];
    range = range.filter(function(item){
        return item != n;
    });

    for(i in range){
        document.getElementById("layer"+range[i]).style.display="none";
        document.getElementById("layer"+range[i]).src = 'image' + range[i] + '.png';
    }

    document.getElementById("layer"+n).style.display="block"; 
    document.getElementById("layer"+n).src = 'image' + n + '_active.png';
}
于 2012-12-16T05:25:42.360 に答える