Изменение фонового изображения кнопки на событии onclick

Question

Почему это не работает? В Firebug, когда я нажимаю кнопку, мне всегда говорят, что cambiaBandiera не определена ...

HELP

Alex

CSS

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

---

JAVASCRIPT (в ГОЛОВЕ)

<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

Я вижу, что вы помещаете свой скрипт между тегами style вместо script тегов. Может быть, поэтому он не может найти вашу функцию?

Answer 2

Вы вводите ввод неправильно, добавление не требуется </input>:

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

Должно быть:

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

input тег самозакрывающийся, для него не требуется закрывающий тег.

Answer 3

JS является стандартным языком, поэтому нет необходимости указывать тип.

Кроме того, это script, а не style, а также:

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

Answer 4

Использовать простой CSS:

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