Using CSS Sprite Images

1. Put all the images into zip file and upload that Zip File in http://spritegen.website-performance.org/

2. It generates a Sprite Image and also Background Position and class  for each image.  Like

.item1 {background-position:0px 0px;}
.item2 {background-position:0px -105px;}
.item3 {background-position:0px -208px;}
.item4 {background-position:0px -312px;}

 3. CSS code looks like

* { margin: 0; padding: 0; }
#nav { width: 400px; margin: 40px auto; }
#nav li {
  list-style-type:none;
 font-size:2em;
}
#nav li a {
 background-image:url(‘../images/Sprite-Image.png’);
 background-repeat:no-repeat;
 padding: 0 0 0 90px;
 display: block;
 height: 72px;
}
.item1 {background-position:0px 0px;}
.item2 {background-position:0px -105px;}
.item3 {background-position:0px -208px;}
.item4 {background-position:0px -312px;}

4. HTML Code

 <ul id=”nav”>
 <li><a href=”Javascript:item1();” title=”Some Link 1″>Item 1</a></li>
 <li><a href=”Javascript:item2();” title=”Some Link 2″>Item 2</a></li>
 <li><a href=”#” title=”Some Link 3″>Item 3</a></li>
 <li><a href=”#” title=”Some Link 4″>Item 4</a></li>
 </ul>

5. JavaScript Code

function item1(){
alert(“Item 1…..”);
}

function item2(){
alert(“Item 2…..”);
}

Advertisement