Spritify: Writing a CSS Image Sprite Generator with DotImage

Published 22 December 08 10:16 AM | jacobl 

Quite a while ago, I read about CSS image sprites on Yahoo's developers page. These sprites are essentially a DIV tag that contains style information to display a section of an image at a given coordinate. Here, I'm posting a free Windows app that will take a series of images, convert it into a single file and generate the html you need to insert them into your website as Spritified images.

Any suggestions on improvements are welcome.

image

Here's a sample:

   1: <!-- Sprite: C:\Images\gifs1\Copy (2) of cockchafer clipart.gif -->
   2: <div style="margin:0px;
   3:             padding:0px;
   4:             width:75px;height:50px;
   5:             background-image:
   6:             url('images/spriteTest.png');
   7:             background-position:-400px -0px">
   8: </div>

Download the Spritify App (with source code)

Attachment(s): Spritify.zip

Comments

No Comments
Anonymous comments are disabled