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问题

回答

相关问题