Pro Header Logo mouseover Interaction

[Brent_St]

Hi,

Is it possible to have the logo change image on mouseover.

I am looking to shift the text in the image from white to black by switching images.

Thanks

Brent

[ruenel]

Hello There,

Thanks for updating in!

To resolve your issue, simply edit your header and add a custom my-logo-1 class to your logo image as shown below:

Add another image element. This time add a custom my-logo-2 class and hide it in all screen sizes. This is necessary so that the image will be preloaded.

In the custom JS section, you may insert this JS code:

(function($){

    var img1 = $('.my-logo-1').attr("src");
    var img2 = $('.my-logo-2').attr("src");
    $('.my-logo-1').hover(function () {          
        $(this).find( "img" ).attr( "src", img2 );
    },function () {
        $(this).find( "img" ).attr( "src", img1 );
    });

})(jQuery);

We would loved to know if this has work for you. Thank you.

[Brent_St]

Hi Rui,

I have added the class my-logo-1 to the first image element, created the second image element with the second image and added the class my-logo-2 and added the custom js to both the header js and overall js fields and it does not work.

Any help you can offer is greatly appreciated

Thanks

Brent

[Alaa]

Hi Brent,

I’ve just modified the JS code on your site to be like that:

(function($){

    var img1 = $('.my-logo-1 img').attr("src");
    var img2 = $('.my-logo-2 img').attr("src");
    $('.my-logo-1').hover(function () {          
        $(this).find( "img" ).attr( "src", img2 );
    },function () {
        $(this).find( "img" ).attr( "src", img1 );
    });

})(jQuery);

and it should be working fine now.

Thanks.

[Brent_St]

Hi Alaa,

Some ow missed the notification email about this.

Thanks so much for fixing this!!

Great customer service as always.

Brent

[ruenel]

You’re welcome Brent!
We’re just glad we were able to help you out.