admin

In a previous post regarding sprites i talked about having a single image that contained two graphic elements.
On rollover the CSS would simply move the sprite a number of pixels to reveal the second part of the graphic – acting like a rollover statement.

With this tutorial all we are going to do is use ONE image to display SIX of icons.
Rather than creating six individual icons and loading them all into the page. We have created one graphic that contains all of the six icons. We are then simply going to ask the CSS to display the image we choose at any given time.

On completion we should see something like:

This is slightly more advanced than i originally intended as we are also going to include rollover graphics.

Example: click here to see a working example of Sprites v2

CSS:

.container{
	width:600px;
	height: 100px;
}

.container ul{
	padding:0px; margin:0px;
}
.container li{
	float:left;
}

/*********** Individual Containers ***********/

#computer, #save, #shop, #music, #search, #file{
	width:100px; height:100px;
	text-indent:-5000px;
	list-style:none;
}

#computer li, #save li, #sho lip, #music li, #search li, #file li{
	font-size:14px;
	height:100px;
}

#computer a, #save a, #shop a, #music a, #search a, #file a{
background-image:url(http://henryharold.co.uk/images/blog/6xsprites.jpg);
	background-repeat:no-repeat;
	display:block;
	height:100px;
}

#computer a{background-position:0px 0px;}
#save a{background-position:-100px 0px;}
#shop a{background-position:-200px 0px;}
#music a{background-position:-300px 0px;}
#search a{background-position:-400px 0px;}
#file a{ background-position:-500px 0px;}

#computer a:hover{background-position:0px -100px;}
#save a:hover{background-position:-100px -100px;}
#shop a:hover{background-position:-200px -100px;}
#music a:hover{background-position:-300px -100px;}
#search a:hover{background-position:-400px -100px;}
#file a:hover{ background-position:-500px -100px;}

HTML:

<div class="container">
	<ul>
    	<li id="computer"><a href="#">computer</a></li>
        <li id="save"><a href="#">save</a></li>
        <li id="shop"><a href="#">shop</a></li>
        <li id="music"><a href="#">music</a></li>
        <li id="search"><a href="#">search</a></li>
        <li id="file"><a href="#">file</a></li>
    </ul>
</div>

……………………………………………………………………………………………………………………

Sprite v2 Alone – Display a single icon only
In most cases you will not wish to display ALL six icons next to each other. All that is required is that you create a new container with the CSS that places it in an appropriate location on the page.

Example: click here to see a working example of Sprites v2 Alone

From the CSS above you simply need to replace the
.container {}, .container ul{} and .container li{} (and all the options)
with

CSS

.container_lone{
	width:100px;
	height: 100px;
}
.container_lone ul{
	padding:0px; margin:0px;
}
.container_lone li{
	float:left;
}

In the HTML you can pick and choose which icon to display by adding the appropriate “li id”.

HTML

<div class="container_lone">
	<ul>
    	<li id="shop"><a href="#">shop</a></li>
    </ul>
</div>

Recently i have come across a number of websites that are still using two images for one navigation tab. By this i mean that on rollover the css is loading a completely new image. This can result in the navigation flickering if the user’s internet is slow.
This can lead to a bad user experience… and generally look quite shabby.

A sprite is simply one image that is made of two parts.
Example:

All that we are going to ask the css to do, is move the above image a number of pixels (vertically) on rollover in order to display the second part of the image. Simples.

design note: you will notice that i am using “image replacement” again so that the html text will display for screen readers and for when all styles are disabled.

Desired Outcome:
The outcome of this can be seen here: http://henryharold.co.uk

CSS

.list{
    width:228px;
    height:104px;
}
.list ul{
    padding:0px;
    margin:0px;
}
#hkl_web{
    text-indent:-9000px;
}
#hkl_web a{
    height:104px;
    background-position:0px -104px;
    background-image:url("http://henryharold.co.uk/portfolio/web/helpkidz.jpg");
    background-repeat:no-repeat;
    display:block;
}
#hkl_web a:hover{
    background-position: 0px 0px;
}

HTML:

<div class="list">
    <ul>
        <li id="hkl_web"><a href="#">HelpKidzLearn</a></li>
    </ul>
</div>