An image sprite is a collection images put into a single image. Generally we use so many images in webpages. Use a single image after combining those images into single image.
Normally web designers try to use so many images to make gorgeous webpage. But when we use so many images the page speed become slow and page weight becomes heavy. Because there are lots of images on the page and they take more loading time. But if we use only one image then loading time will decrease.
Step 1: Combine all image into a single image.
Step 2: Here is the css
[sourcecode]
.sprite{
background:url(image.png) top left no-repeat;
width:664px;
height:8355px !important;
}
.sprite.image1{
width:89px;
height:89px;
float:left;
position:absolute;
cursor:pointer;
left:28px;
top:0px;
background-position:0px 0px;
}
.sprite.image1:hover{
width:89px;
height:89px;
float:left;
position:absolute;
cursor:pointer;
left:28px;
top:0px;
background-position:-337px 0px;
}
[/sourcecode]
Step 3: Here is the Html
[sourcecode]
<div class="sprite image1"></div>
[/sourcecode]
Step into the future with CyberNetikz, where we craft tomorrow’s tech innovations with today’s coding artistry Mega Medusa Casino.