Search code examples
javascriptdomonmouseoverbackground-positiononmouseout

javascript onmouseover and onmouseout issue


Ok I have a javascript rollover. I want the clicked3 picture to be selected in the beginning and when I rollover it or rollover the other pictures the clicked3 would be deselected. The picture ids in my html are: clicked1,clicked2,clicked3,clicked4. I've done this code but it doesn't work. It seems that the picture1 rollover is not working and picture3 is not starting selected... any help?

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

Solution

  • Finally I managed to make it work!!!

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