0

基本的に、ロールオーバーを CSS から JavaScript に変換しました。また、ページが読み込まれたときに選択される画像の 1 つを選択しました。しかし、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 に答える