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 wearing, it's response is in a serialised array. The item/avatar images are in E.G: http://blahblahblahBlah.com/graphic/itemtype/id.png

Thank you in advance.

回答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" />

回答2:

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

来源：https://stackoverflow.com/questions/3377211/javascript-avatar