0

基本上，我将 css 的翻转转换为 javascript。我还选择了加载页面后要选择的一张图片。但是我遇到了 onMouseOut 事件的问题。除了那张照片，一切都很完美。当我将鼠标悬停在其他图片上时，该图片仍处于选中状态。我尝试了多种方法，但不知道如何解决它..有什么想法吗？

<script type="text/javascript">

window.onload=function(){
clicked3();
}

function clicked3(){
document.getElementById("clicked3").style.backgroundPosition = "-198px top";
}

function handleOver3() { 
 if (document.getElementById("clicked3")) document.style.backgroundPosition="-198px top";
 }


function handleOut3() {
 if (document.getElementById("clicked3")) document.style.backgroundPosition="0px top";
}

</script>
4

2 回答 2

0

您没有显示onmouseover和onmouseout事件的处理程序注册？下一个代码示例可能会对您有所帮助。

HTML：

<div id='clicked1' style='width:140px;height:183px;background:URL(http://t3.gstatic.com/images?q=tbn:ANd9GcQbcDkaRcrbsYFUcE6Q7n56_LJr-r4mDqYTOTtPKG9J0MzZcV6V)' />
<div id='clicked2' style='width:140px;height:183px;background:URL(http://t3.gstatic.com/images?q=tbn:ANd9GcQbcDkaRcrbsYFUcE6Q7n56_LJr-r4mDqYTOTtPKG9J0MzZcV6V)' />
<div id='clicked3' style='width:140px;height:183px;background:URL(http://t3.gstatic.com/images?q=tbn:ANd9GcQbcDkaRcrbsYFUcE6Q7n56_LJr-r4mDqYTOTtPKG9J0MzZcV6V)' />

脚本：

<script type="text/javascript">

window.onload=function() {
    var domClicked1=document.getElementById("clicked1");
    var domClicked2=document.getElementById("clicked2");
    var domClicked3=document.getElementById("clicked3");
    clicked.call(domClicked1);
    clicked.call(domClicked2);
    clicked.call(domClicked3);
    domClicked1.onmouseover=
    domClicked2.onmouseover=
    domClicked3.onmouseover=handleOver; // but you must switch to use addEventListener (or attachEvent for IE8 and less)
    domClicked1.onmouseout=
    domClicked2.onmouseout=
    domClicked3.onmouseout=handleOut;
}

function clicked(){
    this.style.backgroundPosition = "-140px top";
}

function handleOver() {
    this.style.backgroundPosition = "0px top";
}

function handleOut() {
    this.style.backgroundPosition = "-140px top";
}

</script>

http://jsfiddle.net/J2SrF/

于 2011-09-07T09:52:49.423 回答
0

它像这样工作！

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-12T10:06:01.487 回答