Update the image source when hovering over the parent element

Question

Update the image source when hovering over the parent element

Check out this snippet of HTML code:

<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 came up with some jQuery code that changes background colors when hovering over a link:

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

It's all good, but now I want to replace the image src with 'OFSTED_good_logo.jpg' when hovering over the link. I've tried tweaking the jQuery code, but it's not working. Can anyone help with this problem please?

javascript jquery html css

Answer 1

Answer №1

If you want to change the image source using find() and attr(), you can do so by utilizing the following jQuery script:

$(".threeBox a").hover(
        function(){ // Hover Over
            $(this).parent().addClass("swapBg").find('img').attr('src','new_image.jpg');
        },
        function(){ // Hover Out
            $(this).parent().removeClass("swapBg").find('img').attr('src','default_image.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/default_image.png" alt="ofsted good rating">
    <h3>Ofsted</h3>
    </a>
</div>

Answer 2

If you want to change the image source using find() and attr(), you can do so by utilizing the following jQuery script:

$(".threeBox a").hover(
        function(){ // Hover Over
            $(this).parent().addClass("swapBg").find('img').attr('src','new_image.jpg');
        },
        function(){ // Hover Out
            $(this).parent().removeClass("swapBg").find('img').attr('src','default_image.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/default_image.png" alt="ofsted good rating">
    <h3>Ofsted</h3>
    </a>
</div>

Answer 3

Answer №2

Learn how to utilize the attr() method effectively

$(".threeBox a").hover(
        function(){ // When the mouse is over
            $(this).parent().addClass("swapBg");
            $(this).find('img').attr('src', 'images/OFSTED_good_logo.jpg');
        },
        function(){ // When the mouse is out
            $(this).parent().removeClass("swapBg");
            $(this).find('img').attr('src', 'images/ofsted_good_transparent.png');
        }
    );

Answer 4

Learn how to utilize the attr() method effectively

$(".threeBox a").hover(
        function(){ // When the mouse is over
            $(this).parent().addClass("swapBg");
            $(this).find('img').attr('src', 'images/OFSTED_good_logo.jpg');
        },
        function(){ // When the mouse is out
            $(this).parent().removeClass("swapBg");
            $(this).find('img').attr('src', 'images/ofsted_good_transparent.png');
        }
    );

Answer 5

Answer №3

Here is a simple solution to achieve the desired outcome:

$(this).find('.myLogo').attr('src', 'yournewimage.png');

For more information, check out attr documentation

Answer 6

Here is a simple solution to achieve the desired outcome:

$(this).find('.myLogo').attr('src', 'yournewimage.png');

For more information, check out attr documentation

Answer 7

Answer №4

To manipulate the image, utilize the .find() method to select it and the .attr() method to modify the src attribute:

$(".threeBox a").hover(
    function(){ // Triggered when mouse is over
        $(this).parent().addClass("swapBg");
        $(this).find('img.ofstedLogo').attr("src", "images/OFSTED_good_logo.jpg");
    },
    function(){ // Triggered when mouse is out
        $(this).parent().removeClass("swapBg");
        $(this).find('img.ofstedLogo').attr("src","images/ofsted_good_transparent.png");
    }
);

Answer 8

To manipulate the image, utilize the .find() method to select it and the .attr() method to modify the src attribute:

$(".threeBox a").hover(
    function(){ // Triggered when mouse is over
        $(this).parent().addClass("swapBg");
        $(this).find('img.ofstedLogo').attr("src", "images/OFSTED_good_logo.jpg");
    },
    function(){ // Triggered when mouse is out
        $(this).parent().removeClass("swapBg");
        $(this).find('img.ofstedLogo').attr("src","images/ofsted_good_transparent.png");
    }
);

Answer 9

Answer №5

There are several ways to achieve this particular effect using a graphical approach. Take a look at the example provided in the JSFiddle link below:

Utilizing jQuery for 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 utilizing jQuery for CSS class swapping:

.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");
    }
);

Link to the JSFiddle example

One method involves directly replacing the IMG source, while the other method involves swapping CSS background images.

Answer 10

There are several ways to achieve this particular effect using a graphical approach. Take a look at the example provided in the JSFiddle link below:

Utilizing jQuery for 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 utilizing jQuery for CSS class swapping:

.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");
    }
);

Link to the JSFiddle example

One method involves directly replacing the IMG source, while the other method involves swapping CSS background images.

Update the image source when hovering over the parent element

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Creating dynamic visual elements on a webpage using HTML: Video

Using jQuery to upload a file and check for empty input fields

Is it possible for a bootstrap carousel to rotate carousel items belonging to two separate carousel identifiers?

Exploring scroll functionality with Webdriver.io v4

Setting up RTL (Right to Left) functionality in Material UI version 5 - A Step-by-Step Guide

What is preventing the listener from activating?

Using the Strikethrough Feature in React

Why does my contact form display PHP code unexpectedly?

Does the onwheel event get triggered when scrolling on a trackpad?

Switch out multiline text with javascript

Is there a delay following the click on the file upload button?

Using Google App Script's pageToken to store attachments on Google Drive

ways to dynamically retrieve input values in PHP

Angular Universal causing issues with updating the DOM component

Despite encountering Error 404 with AJAX XHR, the request is successfully reaching the Spring Controller

The setTimeout function fails to behave as intended when used in conjunction with synchronous ajax

LESS: Using variable values in mixin and variable names

What is the best way to trigger a child function from the parent component in React?

Vue.js blocks the use of iframes

Mapping an object in ReactJS: The ultimate guide