Sprite Image is the collection of images combined together in a particular pattern. Since they are of small file size as compared to the collective file size of all the images taken separately. In this tutorial, you will learn how to use the sprite image for showing the preview of the timeline on mouse hover over the parent abstract image using jQuery.

This is particularly useful when the parent image is the abstract image of timeline and the sprite image contains the preview images of the timeline. For example, in Youtube player, you can see the preview of the video by hovering the mouse pointer on the video progress timeline.

Demo Download

 

CSS:

HTML code for the image div:

In the below HTML code, two img tags are used. First one is for the parent image, which is the abstract image. And second img tag is used for the sprite img placeholder which on mouse hover event used for displaying the sprite image.

Sprite Image:

This is used for displaying the timeline preview.

colorsprite

jQuery Code:

Below code is pre-configured for sprite images with 10 child images in horizontal rail. In order to change the child images configuration, edit line no 80 in the below code accordingly.

Although here the application is implemented for timeline preview, but it can used for other purpose also with little modification in the code.

HomeCodingjQuerySprite image animation effect on hover over parent image for Timeline Preview