1

ユーザーがカーソルを合わせてクリックしたときに、divの背景画像を変更しようとしています。ユーザーがホバー/クリックしている要素のみに画像が変更されるのを制限することに固執しています。この例では、1つのdivにカーソルを合わせるかクリックすると、すべてのボタンが変化します。これは私が複製しようとしているもので、jQueryですでに機能しています。「これ」を使うことは可能だと思いますが、これまでに試したすべての方法でエラーが発生します。

Firefoxでページの読み込み時にアラートが発生するのにIEやChromeでは発生しない理由を教えてくれる人にはボーナスポイントがあります

JavaScript

var buttons = document.getElementsByTagName('div'); 
var i;

function iconDown(e) {
    for (i=0; i<buttons.length; i++) {
        buttons[i].style.backgroundPosition = '0px -61px';
    }
}

function iconUp(e) {
    for (i=0; i<buttons.length; i++) {
        buttons[i].style.backgroundPosition = '0px -122px';
    }
}

function iconOver(e) {
    for (i=0; i<buttons.length; i++) {
        buttons[i].style.backgroundPosition = '0px -122px';
    }
}

function iconOut(e) {
    for (i=0; i<buttons.length; i++) {
        buttons[i].style.backgroundPosition = '0px 0px';
    }   
}

function processAction() {
        alert("Working!");

}

function Init () {
    for (i=0; i<buttons.length; i++) {

            if (document.addEventListener) {  // all browsers except IE before version 9

                buttons[i].addEventListener ("mousedown", iconDown, false);
                buttons[i].addEventListener ("mouseup", iconUp, false);
                buttons[i].addEventListener ("mouseover", iconOver, false);
                buttons[i].addEventListener ("mouseout", iconOut, false);
                buttons[i].addEventListener("click", processAction, false);

        }
        else {   // IE before version 9
                buttons[i].attachEvent ("onmousedown", iconDown);
                buttons[i].attachEvent ("onmouseup", iconUp);
                buttons[i].attachEvent ("onmouseover", iconOver);
                buttons[i].attachEvent ("onmouseout", iconOut);
                buttons[i].attachEvent("onclick", processAction);
            }
        }
   } 

Init();

CSS

        .btn {width:100px; height:61px; float:left;}
        #BackImg {background: url('images/Back.gif') no-repeat 0px 0px;}
        #NextImg {background: url('images/Next.gif') no-repeat 0px 0px;}

HTML

        <DIV class="btn" ID="BackImg"></DIV>
        <DIV class="btn" ID="NextImg"></DIV>
4

2 に答える 2

1

これには JavaScript は必要ありません。css を使用するだけです。

.specialClassyClass{
    /*default background position*/
}
.specialClassyClass:hover{
    /*hover state background position*/
}
.specialClassyClass:active{
    /*mouse down background position*/
}

クリック感のあるものについて：

var whatever = function(el, ev, handler){
    el.attachEvent?
        el.attachEvent(ev, handler):
    el.addEventListener(ev, handler, false);
}

whatever(button[i], 'click', processAction);
于 2013-01-09T21:55:41.177 に答える
0

これを使用できます：

function processAction(e) {
        var active = document.querySelector('.active'); // get currently active button
        if(active != undefined)      
             active.className = "btn"; // remove active class

        e.target.className = 'btn active' // add active class to clicked element
}

あなたのcssは次のようになります：

 .btn {width:100px; height:61px; float:left;background: orange;}
  .active {background: red;}

http://jsfiddle.net/NXVv7/

于 2013-01-09T21:55:42.033 に答える