Monday, June 3, 2024
Homepage · jquery
 Popular · Latest · Hot · Upcoming
179
rated 0 times [  182] [ 3]  / answers: 1 / hits: 99110  / 12 Years ago, mon, june 4, 2012, 12:00:00

I need a menu consisting of images and the images should change when someone hover around it.


HTML


<div id="menu" >  

    <a href="#" id="home"><img  src="images/about.png" alt="logo" /></a>

</div>

CSS


#menu {

        margin-left    : 353px;

        margin-top     : -70px;

        padding-bottom : 16px;

}



#home {

        background     : transparent url(images/about.png);

        z-index        : 1;

}



#home:hover {

        background     : url(images/aboutR.png);

        z-index        : 2;

}

The problem I am facing is that when I hover around the menu item, the image to be displayed on hover is displayed at the back of the old image. Moreover, the hover background image displayed is very small in width and height. Please help out. Thanks


More From » jquery
 Answers
28

Place this code just before the closing body tag,



<script  type='text/javascript'>

$(document).ready(function(){

    $(.home).hover(

        function() {$(this).attr(src,images/aboutR.png);},

        function() {$(this).attr(src,images/about.png);

    });

});

</script>


place the class home in the img tag. Done. Works perfectly.


[#85157] Saturday, June 2, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
meadowe
Add To Favorites
Follow
Total Points: 0
Total Questions: 97
Total Answers: 97
Location: Laos
Member since Fri, Sep 11, 2020
4 Years ago
meadowe questions
Thu, Aug 5, 21, 00:00, 3 Years ago
Tue, Sep 29, 20, 00:00, 4 Years ago
Thu, Jul 9, 20, 00:00, 4 Years ago
Mon, Jun 8, 20, 00:00, 4 Years ago
Sun, Feb 9, 20, 00:00, 4 Years ago
View All
;