CODEWITHSUNDEEP
javascriptjqueryhtmlcss
RustyIngles
RustyIngles

Reputation: 2493

Change img src when on hover of parent

I have the following html

<div class="custom text-center threeBox ofsted">
  <a class="ofsted" title="ofsted report" href="http://reports.ofsted.gov.uk/">
    <img class="text-center ofstedLogo" src="images/ofsted_good_transparent.png" alt="ofsted good rating">
    <h3>Ofsted</h3>
    </a>
</div>

I have written the following jquery which swaps the background colours on hover of a:

    $(".threeBox a").hover(
        function(){ // Mouse Over
            $(this).parent().addClass("swapBg");
        },
        function(){ // Mouse Out
            $(this).parent().removeClass("swapBg");
        }
    );

Which works great, but I need to swap the img.ofstedLogo src on hover to 'OFSTED_good_logo.jpg'. I've tried several changes to the jQuery code but can't get it to work. Any ideas please?

Upvotes: 0

Views: 1243

Answers (5)

Silvertiger
Silvertiger

Reputation: 1680

There are a few ways to accomplish this effect with a graphic .. check out the jsfiddle example here:

jQuery direct image replacement

$(".twoBox > a").hover(
    function(){ // Mouse Over
        $(this).find('img:first').attr("src", 'http://blog.modernica.net/wp-content/uploads/2011/12/2-300x300.png');
    },
    function(){ // Mouse Out
        $(this).find('img:first').attr("src", 'http://www.adamcentric.com/wp-content/uploads/2014/09/1-300x300.png');
    }
);

OR jQuery CSS class swap

.ofstedLogo2 {
    height: 300px;
    width:300px;
    background-image:url(http://www.adamcentric.com/wp-content/uploads/2014/09/1-300x300.png); 
}
.ofstedLogo3 {
    height: 300px;
    width:300px;
    background-image:url(http://blog.modernica.net/wp-content/uploads/2011/12/2-300x300.png); 
}
$(".threeBox > a").hover(
    function(){ // Mouse Over
        $(this).find('div:first').toggleClass("ofstedLogo2");
        $(this).find('div:first').toggleClass("ofstedLogo3");
    },
    function(){ // Mouse Out
        $(this).find('div:first').toggleClass("ofstedLogo2");
        $(this).find('div:first').toggleClass("ofstedLogo3");
    }
);

https://jsfiddle.net/rwdw5u76/

one is using an actual IMG src replace, and the other us using a css background image method instead.

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115282

You can use find() to get the img and attr() for changing the image source 

$(".threeBox a").hover(
        function(){ // Mouse Over
            $(this).parent().addClass("swapBg").find('img').attr('src','OFSTED_good_logo.jpg');
        },
        function(){ // Mouse Out
            $(this).parent().removeClass("swapBg").find('img').attr('src','images/ofsted_good_transparent.png');
        }
    );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="custom text-center threeBox ofsted">
  <a class="ofsted" title="ofsted report" href="http://reports.ofsted.gov.uk/">
    <img class="text-center ofstedLogo" src="images/ofsted_good_transparent.png" alt="ofsted good rating">
    <h3>Ofsted</h3>
    </a>
</div>

Upvotes: 4

j08691
j08691

Reputation: 208032

Use .find() to select the image and .attr() to change the src attribute:

$(".threeBox a").hover(
    function(){ // Mouse Over
        $(this).parent().addClass("swapBg");
        $(this).find('img.ofstedLogo').attr("src", "images/OFSTED_good_logo.jpg");
    },
    function(){ // Mouse Out
        $(this).parent().removeClass("swapBg");
        $(this).find('img.ofstedLogo').attr("src","images/ofsted_good_transparent.png");
    }
);

Upvotes: 2

Starfish
Starfish

Reputation: 3584

This would do the job:

$(this).children('.ofstedLogo').attr('src', 'yourimagehere.png');

See attr

Upvotes: 2

AmmarCSE
AmmarCSE

Reputation: 30607

Use attr()

$(".threeBox a").hover(
        function(){ // Mouse Over
            $(this).parent().addClass("swapBg");
            $(this).find('img').attr('src', 'images/OFSTED_good_logo.jpg');
        },
        function(){ // Mouse Out
            $(this).parent().removeClass("swapBg");
            $(this).find('img').attr('src', 'images/ofsted_good_transparent.png');
        }
    );

Upvotes: 2

Related Questions