CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Amit Kumar
Amit Kumar

Reputation: 5962

How to replace image on hover on menu

On my website I have a menu bar with image. I want to replace the image whenever an user hover on that menu item. This is my menu:

 <ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a class="pressed" href="#" style="width:98px;"><img src="images/home.png" alt=""/>Home</a></li>
    <li class="topmenu"><a href="#" style="width:98px;">&nbsp;</a></li>
    <li class="topmenu"><a href="#" style="width:98px;"><img src="images/home.png" alt=""/>Work</a></li>
    <li class="topmenu"><a href="#" style="width:98px;">&nbsp;</a></li>
    <li class="topmenu"><a href="#" style="width:98px;"><img src="images/home.png" alt=""/>Team</a></li>
    <li class="topmenu"><a href="#" style="width:98px;">&nbsp;</a></li>
    <li class="topmenu"><a href="#" style="width:98px;"><img src="images/home.png" alt=""/>Blog</a></li>
    <li class="topmenu"><a href="#" style="width:98px;">&nbsp;</a></li>
    <li class="topmenu"><a href="#" style="width:98px;"><img src="images/home.png" alt=""/>Reach Us</a></li>    
</ul>

Now I want to replace of that image of that menu on which user has hoverd. For this purpose I am using jQuery. I did this but I could not proceed. 

$('#css3menu1').find('li').hover(function()
                    {

                    }
                );

or is there any other way, so that I can replace images?

Upvotes: 2

Views: 813

Answers (5)

sabithpocker
sabithpocker

Reputation: 15558

It is always recommended that you keep presentation and behavior away from HTML

Here the effect can be done with CSS background-image unless you are looking for some animation.

 <ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a id="home" class="pressed"href="#">Home</a></li>
    <li><a href="#" id="work">Work</a></li>
    <li><a href="#" id="team">Team</a></li>
    <li><a href="#" id="blog">Blog</a></li>
    <li><a href="#" id="reachus">Reach Us</a></li>    
</ul>

#css3menu1 li{
    width:98px;
}

#css3menu1 li a{
    display:block; /* add the width and height you need */
}

#home{ background: transparent url(img/home.png) no-repeat left top; }
#home:hover{ background: transparent url(img/home-hover.png) no-repeat left top; }

#work{ background: transparent url(img/work.png) no-repeat left top; }
#work:hover{ background: transparent url(img/work-hover.png) no-repeat left top; }

Upvotes: 2

Gaurang Tandon
Gaurang Tandon

Reputation: 6753

Assuming your each of the li elements has an img element in it.

(function () {
    /*Wrap inside anonymous function to prevent conflicts with global variables*/
    var orgSrc, // original source of image
        $element; // the image

    $("#css3menu1").find("li").hover(function () {
        $element = $(this).find("img");
        orgSrc = $element.prop("src");
        $element.prop("src", "http://placehold.it/200x200");
    }, function () {
        $element.prop("src", orgSrc);
    });
})();

Live Demo

Upvotes: 3

Shiva Avula
Shiva Avula

Reputation: 1836

First your HTML code can be a little well written.

HTML

<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a class="pressed" href="#"><img src="images/home.png" alt=""/>Home</a></li>
    <li class="topmenu"><a href="#"><img src="images/home.png" alt=""/>Work</a></li>
    <li class="topmenu"><a href="#"><img src="images/home.png" alt=""/>Team</a></li>
    <li class="topmenu"><a href="#"><img src="images/home.png" alt=""/>Blog</a></li>
    <li class="topmenu"><a href="#"><img src="images/home.png" alt=""/>Reach Us</a></li>    
</ul>

CSS

li {
    margin-right: 98px;
}
li:last-child {
    margin-right: 0;
}
li a {
    width:98px;
}

JS

@Gaurang Tandon's answer would be the best choice

Upvotes: 1

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Try

Fiddle Demo

$('#css3menu1').find('li:has(img)').hover(function () { //attach hover if li has img
    var $this = $(this).find('img'); //cache selector
    $this.data('src',$this.prop('src'));//set old src to data 
    $this.prop('src', 'http://placehold.it/200x200'); // change img
}, function () {
    var $this = $(this).find('img'); //cache selector
    $this.prop('src', $this.data('src')); //get old image back
});

Upvotes: 1

El Guapo
El Guapo

Reputation: 5781

$('#css3menu1').find('li').hover(function()
                    {
                          $(this).first('img').attr('src', {hover over image source});
                    },
                    function()
                    {
                          $(this).first('img').attr('src', {hover out image source});
                    }
                );

Upvotes: 1

Related Questions