Display star ratings with css sprite

Sometimes we need to display star ratings on our site. Here css sprite is an easy way to do the same. This example will display ratings out of 5 which also includes 0.5, 1.5 and so on.

Image used in this code

You can use one of the images below.

yellow color star rating sprite image

blue color star rating sprite image

The Css


   span.rating {
     background: url("stars-yellow.png") top left;
     /* background: url("stars-blue.png") top left; */
     display: inline-block;
     height: 21px;
     width: 115px;
     overflow: hidden;
     text-indent: -9999px;
    }
   span.r0 {background-position: -115px 0;}
   span.r05{background-position: -115px 21px;}
   span.r1 {background-position: -92px 0;}
   span.r15{background-position: -92px 21px;}
   span.r2 {background-position: -69px 0;}
   span.r25{background-position: -69px 21px;}
   span.r3 {background-position: -46px 0;}
   span.r35{background-position: -46px 21px;}
   span.r4 {background-position: -23px 0;}
   span.r45{background-position: -23px 21px;}
   span.r5 {background-position: 0 0;}


The Html

 
  <span class="rating r05">Rating : 0.5 star out of 5</span>
  <span class="rating r1">Rating : 1 star out of 5</span>
  <span class="rating r3">Rating : 3 stars out of 5</span>
  <span class="rating r45">Rating : 4.5 stars out of 5</span>


Only the stars will be displayed on the page. The text written between the span tags are hidden. If you want to display the text too, remove the text-indent property from the span.rating class.

Change only the image used in the css and display any one of the stars given above.
Display star ratings with css sprite Display star ratings with css sprite Reviewed by Altaf Hussain on 11:41 AM Rating: 5

2 comments:

  1. Assalam o alaikum

    Bhai mujhe multiple images aur kuchh text data mysql db mein enter karna hai. Image as a blob format. Using ajax.
    It is possible!
    if yes please give idea or code if u have and how to display and edit.

    ReplyDelete

Altaf Web. Powered by Blogger.