Use jQuery to replace an image

[jbadvisor]

When I hover over one image, I want to replace the image of another. I can’t seem to accomplish this using jquery using the examples from the forum. What am I missing?

[jbadvisor]

This is the code that I’m using:

$(document).on(‘mouseover’, ‘.image1’, function () {
// Change image1 on hover
$(this).attr(‘src’, ‘http://jwo.igu.mybluehost.me/wp-content/uploads/2025/01/OverheadUndgroundDistributionSel.png’);

// Change image2 on image1 hover
$(’.image2’).attr(‘src’, ‘http://jwo.igu.mybluehost.me/wp-content/uploads/2025/01/SubstationSel.png’);
});

$(document).on(‘mouseout’, ‘.image1’, function () {

$(this).attr(‘src’, ‘http://jwo.igu.mybluehost.me/wp-content/uploads/2025/01/OverheadUndgroundDistribution-2.png’);

$(’.image2’).attr(‘src’, ‘http://jwo.igu.mybluehost.me/wp-content/uploads/2025/01/Substation-1.png’);
});

[tristup]

Hi Jim,

Thanks for reaching out.
Although the custom coding is beyond the scope of Theme Support, I would suggest you use the single quote not the backquote which is in the current code. If you need any further help, I would suggest you hire a developer who can assist you with the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks