Question

I am trying to replace an image when a link in another part of the page is rolled over. I have a hard coded version working, but I would like to get this so that when I upload to a server I do not need to go in and change the path part.

$(document).ready(function() {
$('.laundryLinks li a').hover(function() {
 $('.homeLaundryPict').attr('src', 'http://192.168.1.2:8888/karenMaezenMiller/wp-content/themes/karenMillerTheme/i/laundryHome_quote.jpg'); },
 function() {
 $('.homeLaundryPict').attr('src', 'http://192.168.1.2:8888/karenMaezenMiller/wp-content/themes/karenMillerTheme/i/laundryHome_noQuote.jpg'); });
});

PS. I also played with trying to just replace a bit of source but had no luck

$(this).src.replace("_quote","_noQuote");

Answer 1

You need to do the following to get this to work:

$(this)[0].src = $(this)[0].src.replace(/_quote/, '_noQuote');

Hope it helps!

EDIT

$(function() {
    $('.laundryLinks li a').hover(function() {
        with ( $('.homeLaundryPict')[0] )
            src = src.replace(/_quote/, '_noQuote');
    }, function() {
        with ( $('.homeLaundryPict')[0] )
            src = src.replace(/_noQuote/, '_quote');
    });
});

Here you go …