在onclick事件上更改按钮的背景图像

Question

为什么这不起作用？在Firebug中，当我点击按钮时，它总是告诉我cambiaBandiera没有被定义...

HELP

亚历

CSS

#ITA{
float:right;
margin : 5px 85px;
width:40px;
height:40px;
background : #FFFFFF url("../ITA_off.png") center center no-repeat;
border:0;
}

---

JAVASCRIPT（在HEAD中）

<style type="text/javascript">
function cambiaBandiera() {
test=document.getElementById("ITA");
test.style.backgroundImage="url('../ITA_on.png')";
}
</style>

---

，这是HTML

<div id="bandiere">
<input type="button" id="ITA" onClick="cambiaBandiera()">  </input> 
</div>

Answer 1

我看到您将脚本放在样式标记而不是脚本标记之间。也许这就是它无法找到你的功能的原因？

Answer 2

您正在错误地指定输入，添加不需要的</input>：

<input type="button" id="ITA" onClick="cambiaBandiera()"></input> 

应该是：

<input type="button" id="ITA" onClick="cambiaBandiera()" />

input标记是自动关闭的，它不需要关闭标记。

Answer 3

使用纯CSS：

#bandiere:active{
    background : #FFFFFF url("../ITA_on.png") center center no-repeat;
}

Answer 4

JS是一种标准语言，因此无需指定类型。

此外，它还是script而非style，所以：

<script>
function cambiaBandiera() {
    test=document.getElementById("ITA");
    test.style.backgroundImage="url('../ITA_on.png')";
}
</script>