How to reference my Sprite code

I am in the process of converting my images into Sprites for faster page load. My CSS code for the Sprites is:

.sprite-nav_contact_up{ background-position: 0 0; width: 100px; height: 30px; } 
.sprite-nav_forum_down{ background-position: 0 -80px; width: 100px; height: 30px; } 
.sprite-nav_home_up{ background-position: 0 -160px; width: 99px; height: 30px; } 
.sprite-nav_learning_up{ background-position: 0 -240px; width: 100px; height: 30px; } 
.sprite-nav_products_up{ background-position: 0 -320px; width: 100px; height: 30px; } 
.sprite-nav_services_up{ background-position: 0 -400px; width: 100px; height: 30px; }

#container li {
    background: url(csg-50585316f2810.gif) no-repeat top left;
} 

The code in my header that contains the original images is:

  <tr bgcolor="#FFFFFF"> 
    <td width="41" valign="top"><div align="center"></div></td>
    <td colspan="3" valign="top"><a href="../index.php"><img src="http://accessworld.accessworld.netdna-cdn.com/images2/nav_home_up.gif" width="99" height="30" border="0"></a><a href="../products2/products.htm"><img src="http://accessworld.accessworld.netdna-cdn.com/images2/nav_products_up.gif" width="100" height="30" border="0"></a><a href="../services2/services.htm"><img src="http://accessworld.accessworld.netdna-cdn.com/images2/nav_services_up.gif" width="100" height="30" border="0"></a><a href="../learning2/learning.htm"><img src="http://accessworld.accessworld.netdna-cdn.com/images2/nav_learning_up.gif" width="100" height="30" border="0"></a><a href="http://www.access-programmers.co.uk/forums/index.php"><img src="http://accessworld.accessworld.netdna-cdn.com/images2/nav_forum_down.gif" width="100" height="30" border="0"></a><a href="../contact2/contact.htm"><img src="http://accessworld.accessworld.netdna-cdn.com/images2/nav_contact_up.gif" width="100" height="30" border="0"></a></td>

What I am stuck on is how to reference the Sprite image instead of my normal graphic image. Anyone know how?

Thanks,

Jon

Hi,

Sprites are applied to the background of an element so you need to add elements that you can attach the sprite to.

e.g.


#container{
	margin:o;
	padding:0;
	list-style:none;	
}
#container li {
	width: 100px;
	height: 30px;
	float:left;
}
#container li a {
	width: 100px;
	height: 30px;
	background: url(csg-50585316f2810.gif) no-repeat top left;
	float:left;
}

#container li a.sprite-nav_contact_up { background-position: 0 0 }
#container li a.sprite-nav_forum_down { background-position: 0 -80px }
#container li a.sprite-nav_home_up {background-position: 0 -160px;width: 99px}
#container li a.sprite-nav_learning_up { background-position: 0 -240px }
#container li a.sprite-nav_products_up { background-position: 0 -320px }
#container li a.sprite-nav_services_up { background-position: 0 -400px }


<ul id="container">
<li><a class="sprite-nav_contact_up" href="#"></a></li>
<li><a class="sprite-nav_forum_down" href="#"></a></li>

etc....

</ul>

Here’s an old example that explains the basics.

http://www.pmob.co.uk/temp/sculleynav.htm

If your sprites are a menu or are important data then you should use the image replacement technique mentioned in that link above. If the images are just decoration then you can just apply them to the background of a suitably sized element. You will of course need to add classes to all these elements so that you can change the background-position accordingly. If all the images are the same size then there is no need to add the dimensions in every rule - just declare them once on the main element.

Note that in your example you have the main image in the list element here:


#container li{}

That will means that you cannot over-ride the background position with a simple class because the id will win out. You will need equal or greater weight to win out.

e.g.


#container li.sprite-nav_contact_up{}

If the above is for a clickable menu then you should really be applying the images to the anchor anyway (as shown in my first snippet).

Simply remove the <img> elements from your anchor tags and replace them with actual readable text then use text-indent on #container li selector to hide it, of course that is a very simply solution to hiding the text but I don’t have the time tonight to explain the correct solution.

Once you have done that simply add the above classes to there respective anchor elements and you should be good to go.

[ot]Dang it Paul, you beat me again :slight_smile:

Welcome back by the way[/ot]

I am right on the limit of my understanding here, so bare with me. I tried this alteration to my code:

<img class="sprite-nav_home_up" src="http://accessworld.accessworld.netdna-cdn.com/images2/nav_products_up.gif" width="99" height="30" border="0">

I thought if I did that, it would apply the class to the image and change it from the products tab image to the home tab image. But it didn’t!

Is the reason it did not work because these are images rather than background elements? Or is it because I did not use “#container” li in any way?

I used this tool to help me create the code: http://spritegen.website-performance.org/

So, I was hoping to use that format rather than creating a new format to work with, if that makes sense.

My site is www.access-programmers.co.uk/forums/ if that helps. The part that I want to change to Sprites is the navigation at the top.

No you can’t do that as all you are doing is applying a background to an image and the image will cover any background up (you can actually apply a background to an image but is too complicated to explain here and not the right way anyway).

Remove the images and use the classes and html as shown in my code above.

Post a link to your actual tab image and I’ll show a working example.

(You could actually just use border-radius and real text for ie9+ instead of images anyway.)

Cheers :slight_smile:

Could I just use a transparent 1x1.gif instead? Would that work?

I also want to use Sprites for my site logo and a few other areas. Is this going to affect things since everything is done using li?

My tab image is here: http://www.access-programmers.co.uk/forums/images/custom/csg-50585316f2810.gif

Yes it could work but you would have to size the image to fit the sprite size but if you are doing that then you adding an extra image request where none is needed if you do it the correct way.

I also want to use Sprites for my site logo and a few other areas. Is this going to affect things since everything is done using li?

It makes no difference what element you use as the technique is the same. Lists are used for navigation because they are a list of things and indeed bare anchors next to each other is bad for accessibility anyway. However you can apply the technique to any element you like within reason.

For a logo you’d just apply the technique to the anchor inside the heading tag - or as I have said a few times now use the image replacement technique I mentioned to provide more accessible content.


My tab image is here: http://www.access-programmers.co.uk/forums/images/custom/csg-50585316f2810.gif[/QUOTE]

Why is there only 1 blue tab? Surely you want blue states available for all the tabs for hover and current page etc?

To make it easier for you to understand it would be beneficial to create the menu on a stand alone page and then you can practice the techniques needed and we can help you with the live version. If you look at the example I gave above it contains the image replacement technique and all the code you need to make this work in an accessible way and can easily be inserted into your structure.

Here’s a working example anyway:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#container {
	margin:0;
	padding:0;
	list-style:none;
}
#container li {
	width: 100px;
	height: 30px;
	float:left;
	text-align:center;
}
#container li a {
	height: 30px;
	line-height:30px;
	float:left;
	position:relative;
}

#container li a span {
	width: 100px;
	height: 30px;
	background: url(http://www.access-programmers.co.uk/forums/images/custom/csg-50585316f2810.gif) no-repeat top left;
	position:absolute;
	left:0;
	top:0;
}
#container li a.sprite-nav_contact_up span{ background-position: 0 0 }
#container li a.sprite-nav_forum_down span{ background-position: 0 -80px }
#container li a.sprite-nav_home_up span{
	background-position: 0 -160px;
	width: 99px
}
#container li a.sprite-nav_learning_up span{ background-position: 0 -240px }
#container li a.sprite-nav_products_up span{ background-position: 0 -320px }
#container li a.sprite-nav_services_up span{ background-position: 0 -400px }
</style>
</head>

<body>
<ul id="container">
		<li><a class="sprite-nav_contact_up" href="#">Contact<span></span></a></li>
		<li><a class="sprite-nav_forum_down" href="#">Forum<span></span></a></li>
		<li><a class="sprite-nav_learning_up" href="#">Learning<span></span></a></li>
		<li><a class="sprite-nav_products_up" href="#">Products<span></span></a></li>
		<li><a class="sprite-nav_services_up" href="#">Services<span></span></a></li>
</ul>
</body>
</html>


Thanks Paul, I will have a look at what you wrote. The reason I only have one blue tab is that there are no hover states. Also, the Sprites are only to be used on the forum, rather than the rest of the site. The idea is to reduce the number of http requests when the forum pages load and so the sprites are for performance reasons only.

That worked nicely, thank you Paul. :slight_smile: I will see if I can work out how to do it for the logo too. Its not a list of tabs but rather an individual item, so not sure what to do.

HI,

For a logo you would do something like this:


<h1 class="logo"><a href="#">Logo text goes here<span></span></a></h1>


/* image replacement for logo image */
.logo, .logo a, .logo span{
	width:272px;/* the width of your image */
	height:122px;/* the height of your image */
	text-decoration:none;
	float:left;
	position:relative;
	overflow:hidden;
	margin:0;
	cursor:pointer;
}
.logo span{
	position:absolute;
	left:0;
	top:0;
	background: url(images/logo.png) no-repeat 0 0;/* adjust the positions to match the sprite position*/
}