Идентификатор изображения не определен в Firefox

Question

Следующая функция для изменения источника изображения при наведении / наведении мыши работает в Chrome:

 $(document).ready(function() {
            $('#img_home').mouseover(function() {
                img_home.src = 'img/btn/act/home2.gif';
            })
            .mouseout(function() {
                img_home.src = 'img/btn/pas/home.gif';
            });

В Firefox консоль отображает «img_home» не определено.

Вот разметка:

<a href="Default.aspx">
    <img alt="home" src="img/btn/pas/home.gif" 
     id="img_home" style="border: none" />
</a>

Есть идеи?

Answer 1

Вам нужно использовать this, это будет ссылаться на соответствующий элемент:

 $(document).ready(function() {
    $('#img_home').mouseenter(function() {
       this.src = 'img/btn/act/home2.gif';
    })
    .mouseleave(function() {
       this.src = 'img/btn/pas/home.gif';
 });

Answer 2

Вам нужно использовать this для ссылки на элемент, а не на его идентификатор:

$(document).ready(function() {
    $('#img_home').mouseover(function() {
        this.src = 'img/btn/act/home2.gif';
    }).mouseout(function() {
       this.src = 'img/btn/pas/home.gif';
    });
});

Answer 3

Не хотите:

$('#img_home').src = ...

Если вы не определили переменную img_home перед добавленным фрагментом кода, не существует известной переменной с именем img_home.