CODEWITHSUNDEEP
javascriptjqueryhtmlcss
billy_comic
billy_comic

Reputation: 899

How Do I Swap Page Logo With Different Logo When Hovering Over Specific Nav Links

I'm sure this is fairly simple using jquery, but I cannot figure it out. I have a site with logo that is present when the site loads. I want to swap that logo with a different logo when the user hovers over a certain navigation link.

When hovering over the "com" link, I want to swap the site logo for a different one.

Can someone tell me how to accomplish this with jquery. 

<div>
<div id="logo"><img src="myimage.png"></div>
<div id="menu">
     <ul>
       <li><a href="#">res</a></li>
       <li><a href="#">com</a></li>

    </ul>
</div>
</div>

Upvotes: 0

Views: 72

Answers (3)

Ruben van Dijk
Ruben van Dijk

Reputation: 47

It might also be worth your time checking into sprites.

Upvotes: 1

Paul Redmond
Paul Redmond

Reputation: 3296

Yes you can do it with jQuery using attr

Give res a class. The hover name should be myimage-hover.png

$(function () {
    $('a.res').hover( function () {
        $(.logo img).attr('src', $(.logo img).attr('src').replace(/\.png/, '-hover.png') );
    });
});

Upvotes: 2

j08691
j08691

Reputation: 207901

This would be one way:

$('a:contains("com")').mouseover(function(){
    $('#logo img').prop('src','http://www.placekitten.com/100/100')
});

jsFiddle example

Upvotes: 0

Related Questions