Playing With A Full Deck
The AJAX demo I created a few weeks back allowed you to move five cards around the screen. Not very interesting. I was using David Bellot's open source SVG playing cards, and although I didn't design the cards myself, the tedious act of creating separate images for each card kept me from including a full deck.
That got me thinking about image clustering, a technique that allows you to create a single image comprising the set of all images used by your Web application. You can then use CSS to display only that portion of the image you're interested in. The following uses image clustering to create a full deck of 52 cards. Remember, you can flip a card over by double-clicking on it.
Rather than create 52 unique image files (53 including the reverse side), this example uses image clustering. All 53 card images are downloaded as a single GIF file as illustrated below:
A clustered image such as this is used as the background image on a DOM element (usually a DIV). You can use CSS to move the background image so that the right section is visible within the boundaries of the DIV. For example:
This uses our clustered image as a background, and positions it so that the Queen of Hearts is visible within our DIV. If you view source on my example, you'll see how to set the image position programmatically using JavaScript.
That got me thinking about image clustering, a technique that allows you to create a single image comprising the set of all images used by your Web application. You can then use CSS to display only that portion of the image you're interested in. The following uses image clustering to create a full deck of 52 cards. Remember, you can flip a card over by double-clicking on it.
Rather than create 52 unique image files (53 including the reverse side), this example uses image clustering. All 53 card images are downloaded as a single GIF file as illustrated below:
A clustered image such as this is used as the background image on a DOM element (usually a DIV). You can use CSS to move the background image so that the right section is visible within the boundaries of the DIV. For example:
<div id="queenofhearts"><div>
<style>
#queenofhearts
{
width: 90px;
height: 130px;
background: url("cards.gif") -900px -260px;
}
</style>
This uses our clustered image as a background, and positions it so that the Queen of Hearts is visible within our DIV. If you view source on my example, you'll see how to set the image position programmatically using JavaScript.