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