Swapping button images with jQuery

Question

I'm trying to learn various aspects of jQuery. I have a button with an id='contact' that I want to change its image on a mouse hover event.

<button id='contact' class='CXIII' onclick="btnContact()">
    <img id="logo" src="images/contact_blue.png">
</button>

I am using the following code, but when I hover over the button, I get this error:

Uncaught TypeError: Cannot read property 'replace' of undefined
(anonymous function)
x.each.x.event.special.(anonymous function).handle
x.event.dispatch
x.event.add.y.handle

$("#contact").hover(
    function () {$(this).src = this.src.replace(contact_blue.src, contact_green.src);},
    function () {$(this).src = this.src.replace(contact_green.src, contact_blue.src);}
);

contact_blue and contact_green are global variables that hold references to images and are instantiated in a preloading function that I have tested and am confident in.

contact_green = new Image();
contact_blue  = new Image();

contact_green.src = "http://www.xxxxxx.com/update/images/contact_green.png";
contact_blue.src  = "http://www.xxxxxx.com/update/images/contact_blue.png";

What am I doing wrong? Thanks!

p.s. I know that there are other ways to approach this (like CSS), but I am specifically trying to learn jQuery at the moment. Also,

EDIT: I tried both of these, unsuccessfully:

$("#contact").hover(
    function () {this.src = this.src.replace(contact_blue.src, contact_green.src);},
    function () {this.src = this.src.replace(contact_green.src, contact_blue.src);}
);


$("#contact").hover(
    function () {$(this).prop('src') = this.src.replace(contact_blue.src, contact_green.src);},
    function () {$(this).prop('src') = this.src.replace(contact_green.src, contact_blue.src);}
);

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

It's this

$(this).src

That's a jQuery object, and it has no src property, either do

this.src = new_source;

or

$(this).prop('src', new_source)

also, are you sure contact_blue and contact_green have a src property ?

However, the error message seems to indicate that this.src is undefined, and has no replace method, which is strange, are you sure #contact is an image element ?

EDIT:

Now that you've posted the HTML, the image is inside the button, so it's

$("#contact").hover(
    function () {
        var image = $(this).find('img').get(0);
        image.src = contact_green.src;
    },
    function () {
        var image = $(this).find('img').get(0);
        image.src = contact_blue.src;
    }
);

Note that replace replaces in strings, it doesn't swap the variables you're passing in ?

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 10, 2015 at 7:22

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

AndroidDev Over a year ago

Thanks. I tried them both. The first gives me the exact same error. The second give me a similar error, except that it says Invalid left-hand side in assignment

AndroidDev Over a year ago

Yes, I am sure of that. I used them in another method successfully.

AndroidDev Over a year ago

#contact is a button element that has an image assigned to it. I'll edit my OP to show it.

adeneo Over a year ago

A button element has no src property ?

AndroidDev Over a year ago

Thanks again. sorry about not posting the HTML originally. I used your code, but now nothing at happens. At least I don't get an error.

|

Sandip Rabade · Accepted Answer · 2015-01-10 07:24:56Z

0

Try This :

   $(this).attr('src','New_Image_Path');

answered Jan 10, 2015 at 7:24

Sandip Rabade

338 bronze badges

Collectives™ on Stack Overflow

Swapping button images with jQuery

2 Answers 2

EDIT:

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDIT:

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related