Is there CSS sprites support in jQuery UI

Question

I'm looking into using CSS sprites, but wouldn't like to invent the wheel. Is there existing support in jQuery or jQuery UI? Or as an alternative, a well debugged jQuery plugin

Answer 1

Using sprites depends on the amount of offset to the part of the position you want -- javascript can't access image data so how would there be such a thing?

There are some tools to help you make sprites and provide you with the base CSS however. Here's my favorite:

http://csssprites.com/

Answer 2

There are some good jquery-tool demos you can copy and then modify. They have good practices. I would start with the tab anchor demo, their stylesheet is well written.

@Mark: The tabs demo uses one image

Answer 3

Why not do it all in CSS? A la:

btn
{
width:50px;
height:50px;
background:url(images/btnspite.png) -30px 100px;
}
btn:hover
{
background-position:-30px -150px;
}
btn:active
{
background-position:-30px -200px;
}

This'll get you started on actually implementing it: http://css-tricks.com/css-sprites/

Answer 4

Depending on the specific tasks you want to accomplish, which you do not specify in the OP, you might no need a plugin at all.

A possible way to use sprites with jQuery is to create a separate class for each sprite state, and then use jQuery to change the class attribute of the element showing the sprite with .attr():

  // Change the sprite state of an element
$(elementSelector).attr("class", spriteClassOfChoie);

For example here is a super simple image gallery making use of sprites and jQuery:

jsFiddle example

Script:

$(function() {

      // The sprite classes
    var sprites = ["home", "next", "prev"];

      // Which image is showing
    var showing = 0;

      // Show the first image
    $("#gallery").addClass(sprites[showing]);

      // Add a click handler to change sprite states
    $("input").click(function() { 

          // Cycle through images by making use of sprites
        $("#gallery").attr("class", sprites[(++showing % sprites.length)]);
    });
});​

HTML:

<input type="button" value="Show Next Image" />
<br/><br/>
<div id="gallery"></div>

CSS:

.home {
width:46px;
height:44px;
background:url('https://i.stack.imgur.com/vPDBk.gif') 0 0; }

.next {
width:43px;
height:44px;
background:url('https://i.stack.imgur.com/vPDBk.gif') -47px 0; }

.prev {
width:43px;
height:44px;
background:url('https://i.stack.imgur.com/vPDBk.gif') -91px 0; }