单击按钮时更改按钮的图像背景

I put an input button, and set its background with an image, now Ii want to change that image when the button is clicked.

我放了一个输入按钮,并用图像设置背景,现在我想在点击按钮时更改该图像。

Here is my relevant code:

这是我的相关代码:

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

CSS code:

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

Can it be done in CSS (as with links-<a> tags), or should I rely to JavaScript instead? Thanks.

可以在CSS中完成(与links- 标签一样),还是应该依赖JavaScript?谢谢。

3 个解决方案

#1

Javascript is not needed:

不需要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);
}

#2

This should work with JavaScript:

这适用于JavaScript:

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

Call it from your button click (or from anywhere you want):

通过单击按钮(或从任何您想要的地方)调用它:

<div id='back'>
    <input type="button" onclick="change()"/>
</div>

#3

It's as Matt Said you could use CSS's active pseudo class to change the background or alternatively you could use javascript to add an eventHandler (onClick Listner )to the button that changes the image.

就像Matt Said那样你可以使用CSS的活动伪类来改变背景,或者你可以使用javascript将eventHandler(onClick Listner)添加到改变图像的按钮。

HTML

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

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

#1