Image hover effect using jQuery

Posted on March 15, 2008
Filed Under javascript, jquery, tips and technique

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

Popularity: 15% [?]

If you like this post then please subscribe to my full RSS feed . You can also subscribe by email and have new posts sent directly to your inbox.And, You can also follow me on twitter at http://twitter.com/roshanbh.

» Blink and bounce effect on image or object using jquery
» How to make accordion menu using jquery
» Flashing Alert Message Box using JQuery
» Block Shuffling effect using jquery

Comments

4 Responses to “Image hover effect using jQuery”

PHP Coding School » Blog Archive » php tips [2008-03-15 19:24:36] on March 15th, 2008 7:30 pm

[...] Image hover effect using jQuery By Roshan 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. Roshan Bhattarai’s Blog - PHP… - http://roshanbh.com.np [...]
Mukesh on March 17th, 2008 6:17 am

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/
Roshan on March 17th, 2008 10:33 am

thanks for the head up mukesh…i’ve corrected it..
3vor10 on May 31st, 2008 2:00 pm

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/