Simple jQuery Image Rollover

Follow @tristarweb

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.

About robert

Hi my name is Rob Hills. At most times you will find me playing around with Magento and Wordpress. I am always looking to improve my web development knowledge – this ranges from PHP, Javascript, jQuery, XML etc. Other than web development – I produce Dance Music. My biggest achievement is getting my track played by Kutski on Radio 1..

Be Social:

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

5 Responses to Simple jQuery Image Rollover

  1. Conroy@ web designer says:

    05:40 25/05/2011

    Being a web designer, This tutorial is very handy and thank you for sharing it. This blog has always been helpful for me to learn new things.

  2. Pollard Nany says:

    05:47 25/05/2011

    It’s really a nice post! I am also using the jQuery animate function. It is the best to set a time for the rollover to complete. Thanks admin :)

  3. Andy says:

    14:06 01/08/2011

    Great image rollover, is there away once rolled over you can click on image2 to popup a hyperlink?

  4. James says:

    14:08 01/08/2011

    Instead of using:

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

    Try:

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

    Be sure to set the a element to display:block so that you can give it a height.

  5. Andy says:

    14:39 01/08/2011

    great thanks for your help james

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=""> <strike> <strong>

Please wrap all source code with [code][/code] tags.

Follow Tristar on Twitter