0

I'm trying to understand a problem I'm having with a slider but realized I don't know what this function is called so I can learn more.

The slider has a PNG with Play, Pause and some dots in both light and dark (rollover) versions that are all in the same image. Each is displayed on the page where they are called for.

I wanted to know what this is called so that I can read more about it and understand how to use it.

kylebellamy
  • 993
  • 3
  • 10
  • 19
  • It's bxslider but the question is more about the name of the technology that uses an image with multiple areas on it that display. For instance, on the CMS I use, there are various icons that show based on the status of the page, for instance. New gets one kind, published gets another but if you grab the image from the page using right click, it ends up being a larger area with all the icons on it. – kylebellamy Mar 24 '14 at 16:02
  • In the case of bxslider, its the start and stop icons which are the same image, just different portions used where needed. – kylebellamy Mar 24 '14 at 16:03

1 Answers1

0

I think the term you're looking for is "sprites", sometimes called "CSS sprites". The idea is that instead of having multiple small images for each thing you have a larger image with all your icons and you change the icon using the overflow and background-position CSS properties. This improves caching and decreases file requests (which is important on limited platforms such as mobile or dialup).

Here's the first google result, and css-tricks is fairly reputable: http://css-tricks.com/css-sprites/

potterbm
  • 125
  • 7