javascript onmouseover和onmouseout問題

好吧我有一個JavaScript翻轉。我想在開始時選擇clicked3圖片，當我翻轉或翻轉其他圖片時，clicked3將被取消選擇。我的html中的圖片ID是：clicked1，clicked2，clicked3，clicked4。我已經完成了這段代碼，但它不起作用。看起來picture1翻轉不起作用，picture3沒有開始選擇...任何幫助？javascript onmouseover和onmouseout問題

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

來源

2011-09-09 alexkey89

任何特別的原因，爲什麼你不使用jQuery的呢？ –

導致我工作的代理人想要這樣..任何幫助？ – alexkey89

我認爲你應該說服你的經紀人這是一個壞主意。 –

最後我設法使它工作！

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-12 09:57:42 alexkey89

嘗試刪除一些代碼並通過問題解決您的問題。例如...首先嚐試顯示picture3開始選擇...並開始編碼從那裏進一步。

來源

2011-09-09 09:20:24

以及圖片3被選中，並與如果放：window.onload = function （）{ clicked3（）; } function clicked3（）{ document.getElementById（「clicked3」）。style.backgroundPosition =「-198px top」; } – alexkey89

首先，您應該只對所有元素使用一個事件偵聽器。將事件監聽器提供給包含元素的父代，並使用e.target引用正在單擊的代理。使用鼠標懸停的一個事件偵聽器，一個用於鼠標懸停，一個用於點擊。這將節省資源。

然後，不是隨時更改CSS屬性，而是爲給定的類名設置CSS規則，並僅使用JavaScript添加/刪除該類。

此外，當您更改與CSS協調的背景下，你應該總是使用同樣的方法，例如，如果你使用的像素在一個座標，用像素也爲另外一個，像"-198px 0"而不是"-198px top"。

來源

2011-09-09 10:07:55

你能提供一個代碼示例嗎？ – alexkey89

javascript onmouseover和onmouseout問題

回答

相關問題