jQuery imagelist (or sprites)

I am in the process of writing a website which has quite a few graphics in them, so I figured it would be nice to just have them all in one PNG file. Which has the nice side effect of reducing the number of requests to my web server.

I came up with (what I think) is a nice piece of javascript and jQuery code to display the images…

HTML

This is the html, which is pretty simple. For the sake of completeness, I have left in a little d-pad imagemap which forms part of the page. The script doesn’t do anything with the imagemap part of the page.

<div class="commands">
    <span class="command back"></span>
    <span class="command info"></span>

    <map id="d-pad" name="d-pad">
        <area shape="circle" coords="200,200,80" onclick="Command('ok');" />
        <area shape="rect" coords="158,14,244,104" onclick="Command('up');" />
        <area shape="rect" coords="158,290,244,380" onclick="Command('down');" />
        <area shape="rect" coords="14,150,102,238" onclick="Command('left');" />
        <area shape="rect" coords="296,150,386,238" onclick="Command('right');" />
    </map>
    <image class="dpad" src='<%= ResolveUrl("~/Content/Images/d-pad.jpg") %>' alt="Site map" usemap="#d-pad">
        <span class="command play"></span>
        <span class="command pause"></span>
        <span class="command stop"></span>
        <span class="command volup"></span>
        <span class="command voldown"></span>
        <span class="command volmute"></span>
    </image>
</div>

The Javascript

Firstly, I set the css for all my “buttons”. The reason for doing the background-image this way is to work around a bug in safari on the iPad.

$(document).ready(function () {
    var buttonsFilename = '< %=ResolveUrl("~/Content/Images/Buttons.png") %>';

    $('.commands .command').css({
        background: 'url(' + buttonsFilename + ')',
        width: '55px',
        height: '55px',
        display: 'inline-block',
        'margin-right': '30px'
    });

Next I set up an array of x-offsets for my images. I got these numbers by loading up my image in Paint.NET and placing my cursor on the left of the desired bit of the image and prefixing a minus sign on the front. All my “buttons” are the same size, so I can set the width and height attributes here too.

var offsets = {
    play: -357,
    pause: -488,
    stop: -425,
    volup: -75,
    voldown: -9,
    volmute: -146,
    back: -888,
    info: -1016
};

The next step is to look through each of the command elements and set the background-position and also wire up a click event handler. It simply uses the index of the array. All javascript objects are effectively associative arrays, so I can simply iterate through the offsets object using the index to find the command element based on the css class. I can also use the index to pass in to the Command javascript function.

$.each(offsets, function (index, value) {
    $('.commands .' + index)
        .css('background-position', value + 'px -2px')
        .click(function () {
            Command(index);
        });
    });
});

The Javascript (in it’s entirety)

function Command(command) {
    $.ajax({
        url: '< %=ResolveUrl("~/Home/Command/")%>',
        type: 'POST',
        data: {
            command: command
        }
    });
}

$(document).ready(function () {
    var buttonsFilename = '< %=ResolveUrl("~/Content/Images/Buttons.png") %>';

    $('.commands .command').css({
        background: 'url(' + buttonsFilename + ')',
        width: '55px',
        height: '55px',
        display: 'inline-block',
        'margin-right': '30px'
    });

    var offsets = {
        play: -357,
        pause: -488,
        stop: -425,
        volup: -75,
        voldown: -9,
        volmute: -146,
        back: -888,
        info: -1016
    };

    $.each(offsets, function (index, value) {
        $('.commands .' + index)
            .css('background-position', value + 'px -2px')
            .click(function () {
                Command(index);
            });
    });
});

So, I can now easily add new buttons into my page by tacking them on the end of my wide image and adding the name to the offsets object.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s