1

入力ボタンを配置し、その背景に画像を設定しました。ボタンがクリックされたときにその画像を変更したいと思います。

これが私の関連コードです：

<div id='back'>
    <input type="button"/>
</div>

CSSコード：

#back input{
    width: 130px;
    height: 130px;
    background: url(img/back_default.png);
    border: hidden;
}

（links-tagsのように）CSSで実行できますか<a>、それとも代わりにJavaScriptに依存する必要がありますか？ありがとう。

4

3 に答える 3

5

Javascriptは必要ありません：

#back input {
    width: 130px;
    height: 130px;
    background: url(img/back_default.png);
    border: hidden;
}

#back input:active {
    background-image: url(img/back_default-active.png);
}
于 2012-10-19T03:43:30.220 に答える
0

これはJavaScriptで機能するはずです。

function change() { 
    document.
        getElementById("back").
        getElementsByTagName("input").
        style.backgroundImage = "url(img/anotherImage.png)"
}

ボタンクリックから（または任意の場所から）呼び出します。

<div id='back'>
    <input type="button" onclick="change()"/>
</div>
于 2012-10-19T03:52:23.107 に答える
0

Matt Saidのように、CSSのアクティブな疑似クラスを使用して背景を変更するか、JavaScriptを使用して画像を変更するボタンにeventHandler（onClick Listner）を追加することができます。

HTML

<div id='back'>
     <input type="button" id="xyz" value="Go to back" class="button"/>
</div>

JS

<script>

el = document.getElementById('xyz');
el.addEvenListener("click",changeImg,false);

function changeImg()
{
    el = document.getElementById('xyz');
    el.style.backround="url('img/back_default-active.png')";
}

</script>
于 2012-10-19T04:04:36.553 に答える