Image hover effect using jQuery

In this post, I’ll show you how to make a image hover effect using “div” in jquery.Take a look at a telebid.com if you put the mouse over the bid button it will be changed to login and afterwards it become bid button.


You can click here to view the demo.

Step 1:
First of all, define two classes in css one for “loginimage” and the another for “bidimage” in the “style.css” file

.bidimage
{
  background-image:url(images/bid.gif);
  background-repeat:no-repeat;
  height:28px;
  width:62px;
  cursor:pointer;
}       

.loginimage
{
  background-image:url(images/login.gif);
  background-repeat:no-repeat;
  height:28px;
  width:62px;
  cursor:pointer;
}

Since image is used as the background in div, the height and width should be defined and declared one pixel more than the background image.

Now, keep in the following division in the “index.html” inside the body tag.

<div class="bidimage"> </div>

Now, define the script for the hover effect using jQuery inside the the “index.html” file.

<script>
$(document).ready(function()
{
  $("div.bidimage").mouseover(function ()
  {
    $(this).addClass("loginimage");
  });

  $("div.bidimage").mouseout(function ()
  {
    $(this).removeClass("loginimage");
  });
});
</script>

As you can see above in the script, when mouse is over div with the class bidimage the “loginimage” class is added the that div.And, when mouse is out the “loginimage” class is removed from the division.

Click here to download the full source codes

17 thoughts on “Image hover effect using jQuery

  1. the link to telebid dot com is not working. There is some spelling mistake. Just want to make the correction. The working link is as follows:
    http://www.telebid.com/

  2. thanks for the head up mukesh…i’ve corrected it..

  3. thanks for the nice tutorial!

    see a pretty live example: (hover and click the dog; “würzen” means “to flavor sth.”)
    http://www.3vor10.com/blog/2008/05/30/ohne-worte/

  4. Thanks for the above. Great way to resolve the li:hover problem with IE6 !
    Usingf the above I can finally change background of my listed items in IE6 as the normal css li:hover doesn’t work.

  5. needed!

  6. Böyle bi efekt ar?yordum

  7. Thank for sharing, this cool stuff..
    I would like to try to make using that in my website..

    Thank you

  8. pretty cool article. Hover effect works great.

  9. f

    nice! fnks!

  10. thank you wey much

  11. I was looking for how to do an application like that . Your post is easy to understand. I am really glad to see it. Thanks

  12. wendy

    Hello Roshan,

    Its a cool stuff. I’ll try this.

  13. kindy share an image border effect when hover

  14. thank you wery much

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>