javascript onmouseover и onmouseout вопрос

Question

Хорошо, у меня есть ролловер javascript.Я хочу, чтобы изображение clicked3 было выбрано в начале, и когда я переворачиваю его или опускаю другие изображения, clicked3 будет отменен.Идентификаторы изображений в моем html: clicked1, clicked2, clicked3, clicked4.Я сделал этот код, но он не работает.Кажется, что ролик Picture1 не работает, и изображение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";
}

Answer 1

Прежде всего, вы должны использовать только один прослушиватель событий для всех ваших элементов. Отдайте прослушиватель событий родителю, содержащему ваши элементы, и укажите тот, по которому щелкнули, используя e.target Используйте один прослушиватель событий для наведения мыши, один для мыши и один для щелчка. Это сэкономит ресурсы.

Затем, вместо изменения свойств CSS на лету, установите правило CSS для данного имени класса и добавьте / удалите только этот класс с помощью JavaScript.

Кроме того, когда вы изменяете фон, координированный с помощью CSS, вы всегда должны использовать один и тот же метод, например, если вы используете пиксели для одной координаты, используйте пиксели также для другой, например "-198px 0" вместо "-198px top".

Answer 2

Наконец мне удалось заставить его работать !!!

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";
}

Answer 3

Попытайтесь удалить биты кода и решить вашу проблему проблема за проблемой. Например ... сначала попробуйте показать картинку3, начиная с выбранного ..., а затем начать кодирование дальше.