jQuery Rollover Image Tutorial: Image Flip and Background Positioning
Approaches to a Rollover Image
Rollover images have been around nearly as long as the visual web. This refers to a technique whereby an image changes when the user drags his mouse across it, though the execution of a rollover image is lost on many. In its most basic concept, the rollover image is extremely simple: trap both the mouseover and mouseout events with JavaScript for a specific image element and swap out the source for that image upon triggering of those events. When handled properly, a rollover can be extremely useful, though one should examine an alternative approach to the class source switch as well.
With the widespread support of CSS in modern browsers, we are able to attach a background image to any element in our markup, and the position of that background image can be modified. By creating a single image file (or sprite map) that houses multiple pictures to be displayed within it, we can simulate the traditional rollover image by simply moving the background position of the sprite map. Both of these techniques can be seen in this example.
Method #1 - The Image Flip
As the first example illustrates, and image flip is the exercise of changing the actual source attribute of an image tag for another file. This allows for the flexibility of swapping out for any image accessible to the browser, but the images are not loaded into cache until they are displayed. If the secondary image being used is not optimized, or if the internet connection is slow, the user may experience a delay in the flip. With the speed of modern browsers and the high speed of the average person’s internet connection, though, these delays are often imperceptible, especially with smaller images as those used for navigation elements and such.
Assuming a basic knowledge of the jQuery library, executing an image flip is extremely easy. Let’s say you have an image tag with an id attribute of “my-flip” that you want to change. To do so, you simply need to alter the source attribute of that element to the path of the new image like so: $(’#my-flip’).attr(‘src’, ‘path/to/new/image.jpg’). As you can see in the source of our example, I have actually defined the images to be used as variables and simply swap the values out upon mouseover and mouseout.
Method #2 - Background Position
So, rather than replacing the image entirely, this method allows us to shift the background image of an element to display only the section we wish to be viewed. Imagine, if you will, your element is a window, and you are determining what is visible through that portal. Thinking from this perspective, it is easy to imagine the image files we need to create. If you simply want a square 80 by 80 pixel image displayed, and you have two different backgrounds that may be viewable, your sprite map may be a single image that is 80 by 160 pixels in size. By sliding the background image by 80 pixels, only the one image is visible at any given time.
As with anything else in web, there are pros and cons to each technique. In this case, we completely lose the need for loading additional images upon display (as does the image flip technique), but our initial load time is slightly longer, because we have a larger image that must needs be loaded. However, if our images are properly optimized, the difference is negligible. Let’s say we have an image 160 pixels tall, and the bottom half is to appear on hover. Using jQuery, we can easily adjust the background position accordingly like so: $(’#my-img’).css({ backgroundPosition : ‘0 80px’ }).
Implementing jQuery
Swapping images and moving backgrounds around are both well and good, but we came to talk about rollover images with jQuery! Yes, you’re right, and now that we have a thorough understanding of the techniques involved with the actual visual change, let’s look and see how easily we can implement jQuery to trap the events and change the image. jQuery makes this extremely easy by use of its .hover() method. This method accepts two sepearate function declarations - the first to be executed on mouseover and the second to be executed on mouseout - and passed the event object to each. By receiving the event object, we have our original markup element by simply referencing the target member of the event object. So, if you have defined your functions to be performed and assigned them to variables, you could apply them to an element as simply as this: $(’#my-img’).hover(overFunc, outFunc). jQuery does the rest of the magic for you.
Conclusion
Many web technologies are quite simplistic when broken down and understood in their parts, and rollover images definitely fit into this realm. But as is true with so many of these technologies, their ease of use can often lead into overuse or even misuse. Examine all your options carefully, and determine whether a rollover image is indeed the best solution for your need. If it is, review the two methods discussed within this article and determine which best suits the current situation. If you have many different rollovers on one page, you may well be able to create one huge sprite map that can be used for every single rollover image!
