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

我放置了一个输入按钮，并将其背景设置为图像，现在我想单击该按钮时更改该图像。单击按钮时更改按钮的图像背景

这里是我的相关代码：

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

CSS代码：

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

能将它CSS来实现（如链接 - <a>标签），或者我应该依赖改为JavaScript？谢谢。不需要

来源

2012-10-19 Malloc

你希望背景仅在点击或从此改变？ – Phil

@菲尔：只有在点击时，只要我按住鼠标点击按钮。 – Malloc

@Malloc然后看到马特的回答如下 – Phil

的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-19 03:43:30

好的调用，删除了关于输入类型属性的错误信息。 –

是的，我正在写你，'输入'而不是'按钮'。你期待我:) - 这很好，thanx你的帮助:) – Malloc

这应该使用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-19 03:52:23

就像Matt说的那样，你可以使用CSS的活动伪类来改变背景，或者你可以使用jav ascript添加一个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>

来源

2012-10-19 04:04:36 ffledgling

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

回答

相关问题