Javascript Avatar

I'm trying to create a javascript avatar. E.G with Head Items, body items etc... I have a PHP script that queries the database and retrieves the current items the avatar/user is we

Solution 1:

If all your images are in one file, you have two choices. Firstly, you could split it into many files. But the better way would be to keep it in one file, and then make divs with a background image; and use an offset.

For instance, if you had a hammer, and it was sized 24 * 24, located at 100, 100 you would do this. Assuming you had a file called http://blahblahblahBlah.com/character.php:

CSS:

.hammerPic {
   width: 24px; height: 24px;
   background-image: url('graphic/itemtype/id.png');
   background-position: -100px -100px;
}

HTML:

<div class="hammerPic" />

Solution 2:

you can load image data from text with data uris. http://en.wikipedia.org/wiki/Data_URI_scheme, if that was your question:)