Simple jQuery Image Rollover

Today I am going to show you how to create a simple image rollover using jQuery. The effect is similar to CSS sprites but instead of an instant image change, I have used the jQuery animate function to set a time for the rollover to complete.

View Demo »

Link to the jQuery library

Like last week, in order to use jQuery you need to make sure you link to it in the head section of your code. Alternatively you can download the library and link to it locally on your computer.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

The HTML

In the body section of the code, create a div class called ‘jqwrap’. Inside this div, put the two images you want to use. The second image needs to have a class of ‘hoverImg’ and will appear on mouse hover.

<div class="jwrap">
        <img src="image1.jpg" alt="Image1"  />
        <img src="image2.jpg" alt="Image2" class="hoverImg" />
</div>

The CSS

Copy and paste the CSS into your stylesheet. Here I have set the images within the div class ‘jwrap’ to absolute. This will allow you to animate them using jQuery. The height and width may vary depending on the size of your image.

.jwrap {
        height:219px;
        width:214px;
        padding:0;
        overflow:hidden;
        position:relative;
}
.jwrap img {
        position:absolute;
        top:0;
        left:0;
}

The jQuery

Copy and paste the following jQuery into the head section of your code. In this bit of code I have used the hover function which allows you to have to states – mouse on and mouse off. On hover the jQuery animates the position of class ‘hoverImg’ to top: 0. On mouse off it gets animated back to top: 200px. I have also passed in a time of 700. This is just under 1 second.

<script type="text/javascript">
$(function() {
                $('.hoverImg').css({"top" : "200px"});
                $('.jwrap').hover(function() {
                        $(this).children('.hoverImg').stop()
                        .animate({"top" : "0"}, 700);
                }, function() {
                        $(this).children('.hoverImg').stop()
                        .animate({"top" : "200px"}, 700);
                });
        });
</script>

Note: You may have to change the top position to suit your image size.

Now save all your files and navigate to your web design page. You should notice both of your images are stacked on top of each other. When you hover over the image, the second image should slide over the top of the first image. When you hover off they should return to their original state.

Working Demo

To view a working demo, please click here. I hope you found this post useful and I will be writing some more jQuery posts very soon.