CSS Image Wizard

Image Wizard (Images Sprites)

An image Sprite is a series of images placed in a single picture.

Pages that contain a large number of images take longer to download, and multiple server requests are generated.

Using image sprites will reduce the number of server requests and conserve bandwidth.

Image Wizard-A simple example

We use this individual image ("Img_navsprites.gif") instead of three separate images:

Through CSS, we can display only the part of the image we need.

In the following example, the CSS specifies which part of the "img_navsprites.gif" image to display:

Instance

Img.home{width:46px;height:44px;background:url (img_navsprites.gif) 0 0;}

Try it yourself.

Example Explanation:

Since the SRC attribute cannot be empty, all of us define a small transparent image. The displayed image will be the background image we specify in the CSS:

Define the part of the image we want to use:

width:46px;height:44px;

Define the background image and its location (left 0px, top 0px):

Background:url (img_navsprites.gif) 0 0;

This is the simplest way to use an image sprite, and now we want to extend it by linking and hover effects.

Image Wizard-Create a navigation list

We want to use the image sprite ("Img_navsprites.gif") to create a navigation list.

We will use HTML lists because they can act as lists and also support background images:

Instance

#navlist {position:relative;} #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist Li, #navlist a {height:44px;display:block;} #home {left:0px;width:46px;} #home {background:url (' img_navsprites.gif ') 0 0;} #prev {left:63px;width:43px;} #prev {background:url (' img_navsprites.gif ') -47px 0;} #next {left:129px;width:43px;} #next {background:url (' img_navsprites.gif ') -91px 0;}

Try it yourself.

Example Explanation:

Set the position to relative to allow absolute positioning:

#navlist {position:relative;}

The margins and padding are set to 0, the List-style is removed, and all list items are absolutely positioned:

#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}

The height of all images is 44px:

#navlist Li, #navlist a {height:44px;display:block;}

Now start positioning and adding the styles for each specific section:

To the far left, the image width is 46px:

#home {left:0px;width:46px;}

Define the background image and its location (left 0px, top 0px):

#home {background:url (img_navsprites.gif) 0 0;}

Right position 63px (#home width 46px + interval between items), Width is 43px:

#prev {left:63px;width:43px;}

Define the background image to move to the right 47px (#home width is 46px + 1px divider line):

#prev {background:url (' img_navsprites.gif ') -47px 0;}

Right to 129PX (starting from #prev 63px + #prev width 43px + extra space), width is 43px:

#next {left:129px;width:43px;}

Define background image Right 91px (#home width 46px + 1px line divider + #prev width 43px + 1px line divider):

#next {background:url (' img_navsprites.gif ') no-repeat-91px 0;}

Image Sprite-Hover effect

Now, we want to add the hover effect to the navigation list.

Tip: The hover selector is used to select an element when the mouse pointer is over it.

Tip:: The hover selector is available on all elements, not just links.

Our new image ("Img_navsprites_hover.gif") contains three navigation images and three images for hover effects:

Since this is a separate image instead of six separate files, the load delay does not occur when the user moves the mouse pointer over the image.

To add the hover effect, we only added three lines of code:

Instance

#home a:hover{background:url (' img_navsprites_hover.gif ') 0-45px;} #prev a:hover{background:url (' img_navsprites_hover.gif ') -47px-45px;} #next a:hover{background:url (' img_navsprites_hover.gif ') -91px-45px;}

Try it yourself.

Example Explanation:

For all three hover images, we set the same background position and just move down 45px:

#home a:hover{background:transparent URL (img_navsprites_hover.gif) 0-45px;}

CSS Image Wizard