0

わかりました、javascript ロールオーバーがあります。clicked3 の画像を最初に選択したいのですが、それをロールオーバーするか、他の画像をロールオーバーすると、clicked3 の選択が解除されます。私のhtmlの画像IDは、clicked1、clicked2、clicked3、clicked4です。このコードを実行しましたが、機能しません。ピクチャ 1 のロールオーバーが機能しておらず、ピクチャ 3 が選択されていないようです...何か助けはありますか?

window.onload=function() {
    var domClicked1=document.getElementById("clicked1");
    var domClicked2=document.getElementById("clicked2");
    var domClicked3=document.getElementById("clicked3");
    var domClicked3=document.getElementById("clicked4");

    clicked1.call(domClicked1);
    clicked2.call(domClicked2);
    clicked3.call(domClicked3);
    clicked4.call(domClicked4);

    domClicked1.onmouseover=handleOver1;
    domClicked2.onmouseover=handleOver2;
    domClicked3.onmouseover=handleOver3;
    domClicked3.onmouseover=handleOver4; 


    domClicked1.onmouseout=handleOut1;
    domClicked2.onmouseout=handleOut2;
    domClicked3.onmouseout=handleOut3;
    domClicked4.onmouseout=handleOut4;

}

function clicked1(){
    this.style.backgroundPosition = "0px top";
}

function handleOver1() {
    this.style.backgroundPosition = "-198px top";
}

function handleOut1() {
    this.style.backgroundPosition = "-198px top";
}



function clicked3(){
    this.style.backgroundPosition = "-198px top";
}

function handleOver3() {
    this.style.backgroundPosition = "-198px top";
}

function handleOut3() {
    this.style.backgroundPosition = "0px top";
}
4

3 に答える 3

0

コードの一部を削除して、問題ごとに問題を解決してください。たとえば...最初にpicture3が選択された状態で表示されるようにしてから、そこからさらにコーディングを開始します。

于 2011-09-09T09:20:24.760 に答える
0

何よりもまず、すべての要素に対して 1 つのイベント リスナーのみを使用する必要があります。要素を含む親にイベント リスナーを与え、 を使用してクリックされているものを参照しますe.target。マウス オーバー用、マウス アウト用、およびクリック用に 1 つのイベント リスナーを使用します。これにより、リソースが節約されます。

次に、CSS プロパティをその場で変更する代わりに、特定のクラス名に CSS ルールを設定し、JavaScript でそのクラスのみを追加/削除します。

また、CSS でコーディネートされた背景を変更する場合は、常に同じ方法を使用する必要が"-198px 0"あります"-198px top"。

于 2011-09-09T10:07:55.940 に答える
0

最後に、私はそれを機能させることができました!!!

window.onload=function() {
var domClicked1=document.getElementById("clicked1");
var domClicked2=document.getElementById("clicked2");
var domClicked3=document.getElementById("clicked3");
var domClicked4=document.getElementById("clicked4");



clicked3.call(domClicked3);

domClicked1.onmouseover=handleOver1;
domClicked1.onmouseout=handleOut1;

domClicked2.onmouseover=handleOver2;
domClicked2.onmouseout=handleOut2;

domClicked3.onmouseover=handleOver3; 
domClicked3.onmouseout=handleOut3;

domClicked4.onmouseover=handleOver4;
domClicked4.onmouseout=handleOut4;

}

function handleOver1(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

function handleOut1(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

function handleOver2(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

function handleOut2(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}



function clicked3(){
    this.style.backgroundPosition = "-198px top";
}

function handleOver3() {
    this.style.backgroundPosition = "-198px top";
}

function handleOut3() {
    this.style.backgroundPosition = "0px top";
}

function handleOver4(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

function handleOut4(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}
于 2011-09-12T09:57:42.130 に答える