CODEWITHSUNDEEP
javascriptjqueryimagefirefox
Hernán
Hernán

Reputation: 4587

Image ID undefined in Firefox

The following function to change image source on mouse hover/mouseout works in 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';
            });

In Firefox the console displays 'img_home' not defined.

Here's the markup:

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

Any ideas?

Upvotes: 1

Views: 473

Answers (3)

Sarfraz
Sarfraz

Reputation: 382666

You need to use this, it will refer back to relevant element:

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

Upvotes: 3

lonesomeday
lonesomeday

Reputation: 237847

You need to use this to refer to the element, not its id:

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

Upvotes: 2

MikeTheReader
MikeTheReader

Reputation: 4190

Don't you want:

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

Unless you've defined the img_home variable before the code snippet you added, there is no known variable with a name of img_home.

Upvotes: 0

Related Questions