Sprites puzzle

HTML & CSS
1

Sorry if this is the wrong section

I made a sprite made out of 5 stars.

The resulting css; i think simply allows me to choose one of them. As thet are all the same that is not mach use…

What I need is to choose 1 star, or 2 stars, or 3 stars, etc

How do I do that? Is what I have any good?

.star25, .star25, .star25, .star25, .star25{
	
background: url(sprites.png) no-repeat;}

.star25{
	background-position: -2px 0;
	width: 25px;
	height: 23px;
}

.star25{
	background-position: -26px 0;
	width: 25px;
	height: 23px;
}

.star25{
	background-position: -48px 0;
	width: 25px;
	height: 23px;
}

.star25{
	background-position: -74px 0;
	width: 25px;
	height: 23px;
}

.star25{
	background-position: -99px 0;
	width: 25px;
	height: 23px;
}
2

I’m finding it hard to visualise this with no HTML or image to look at, but here goes.

If you have a row (?) of five stars, and you want one, two, three or whatever of them to appear, then surely you need to increase the width of the display to reveal the correct number. 25px is only ever going to be wide enough to show one, isn’t it?

3

Hi TechoBear

Thanks, I’ll play with that.

In fact, I’ve solved the problem by creating 5 images, one for each lot of stars and it works fine…

Many thank, all

Over & out!

RESOLVED

4

If you simply want to show 1 to 5 stars then just add one to 5 images to the html as required.

If you need it as a background image then you don’t need a sprite you just need the one star image and show it 5 times.

As technoBear said above if you have a sprite containing all 5 stars then you wil have to manipulate the width of the item as required to show more or less of the stars. e.g. if a star is 25px width then the element needs to be 50px wide to show two of them and so on…

Usually with stars you would show all 5 together but fade out the ones not chosen. It all depends on usage of course.

This example is about 10 years old but shows one way to achieve a more complicated system with a more complicated sprite.

1 Like
5

Hi Paul

Many thanks

That looks very good; just need to change the colour in GIMP.

Regards

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.