The row of five star in the left of the image is the average of all the users ratings of the item and the five rows of stars below the pictures are the amount of rating by star input by each user on the item.

The page source for the image above is:

HTML Code:
.bufallo {
top:50px;
	width:80px;
	height:16px;
	margin:0;
	padding:0;
	left:65px;
	list-style:none;
	position:relative;
	background: url(images/star-matrix.gif) no-repeat 0 0;
}
.rating {
top:110px;
	width:80px;
	height:16px;
	margin:0;
	padding:0;
	left:230px;
	list-style:none;
	position:relative;
	background: url(images/star-matrix.gif) no-repeat 0 0;
}
/* add these classes to the ul to effect the change to the correct number of stars */
.nostar {background-position:0 0}
.onestar {background-position:0 -16px}
.twostar {background-position:0 -32px}
.threestar {background-position:0 -48px}
.fourstar {background-position:0 -64px}
.fivestar {background-position:0 -80px}
ul.rating li {
	cursor: pointer;
	/*ie5 mac doesn't like it if the list is floated\*/
	float:left;
	/* end hide*/
	text-indent:-999em;
}
ul.rating li a {
	position:absolute;
	left:0;
	top:0;
	width:16px;
	height:16px;
	text-decoration:none;
	z-index: 200;
}
ul.rating li.one a {left:0}
ul.rating li.two a {left:16px;}
ul.rating li.three a {left:32px;}
ul.rating li.four a {left:48px;}
ul.rating li.five a {left:64px;}
ul.rating li a:hover {
	z-index:2;
	width:80px;
	height:16px;
	overflow:hidden;
	left:0;
	background: url(images/star-matrix.gif) no-repeat 0 0
}
ul.rating li.one a:hover {background-position:0 -96px;}
ul.rating li.two a:hover {background-position:0 -112px;}
ul.rating li.three a:hover {background-position:0 -128px}
ul.rating li.four a:hover {background-position:0 -144px}
ul.rating li.five a:hover {background-position:0 -160px}
/* end rating code */

.rating {float:left;}
h2 {
top:10px;
	width:80px;
	height:16px;
	margin:0;
	padding:0;
	left:65px;
	list-style:none;
	position:relative;
	font-size:12px;
	}
h3 {
top:110px;
position:relative;
	float:left;
	clear:both;
	width:8em;
	left:200px;
	margin:-3px 0 2px 0;
	font-size:100%
}
h4 {
margin:5px 0 2px 0;
top:30px;
position:relative;
	float:left;
	clear:both;
	width:8em;
	left:0px;
		font-size:100%
}

h5 {
top:110px;
position:relative;
	left:200px;
	width:8em;
	
}
#sapote {
top:110px;
position:relative;
	left:200px;
	width:300px;
	
}

/* totals */
.rating li.total{
	background:none;
	top:0;
	right:-40px;
	/*left:90px; if you want them aligned left*/
	position:absolute;
	text-indent:0;
	font-size:93%;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.rating {float:none}
</style>
<![endif]-->
</head>
<body>
<h1> Nike Air Jordan </h1>
<h4>Price:</h4>
<h2>$90.23</h2>
<h4>Rating:</h4>
<ul class="bufallo fivestar">
	<li class="one"><a href="#" title="1 Star"></a></li>

</ul>
<td width="782" height="100" align="center" style="left:100px; position:relative;" ><a href="#"><img src="../images/coloso.gif" width="190" style="left:80px; position:relative;"  height="140" alt="coloe"/></a></td>

<div id="sapote"><img src="../images/line..gif" alt="asd" /></div>
<h5>Users Rates</h5>
<h3>1 Star Active</h3>
<ul class="rating onestar">
	<li class="one"><a href="#" title="1 Star">1</a></li>
	<li class="two"><a href="#" title="2 Stars">2</a></li>
	<li class="three"><a href="#" title="3 Stars">3</a></li>
	<li class="four"><a href="#" title="4 Stars">4</a></li>
	<li class="five"><a href="#" title="5 Stars">5</a></li>

	<li class="total">[20]</li>
</ul>
<h3>2 Stars Active</h3>
<ul class="rating twostar">
	<li class="one"><a href="#" title="1 Star">1</a></li>
	<li class="two"><a href="#" title="2 Stars">2</a></li>
	<li class="three"><a href="#" title="3 Stars">3</a></li>
	<li class="four"><a href="#" title="4 Stars">4</a></li>

	<li class="five"><a href="#" title="5 Stars">5</a></li>
	<li class="total">[40]</li>
</ul>
<h3>3 Stars Active</h3>
<ul class="rating threestar">
	<li class="one"><a href="#" title="1 Star">1</a></li>
	<li class="two"><a href="#" title="2 Stars">2</a></li>
	<li class="three"><a href="#" title="3 Stars">3</a></li>

	<li class="four"><a href="#" title="4 Stars">4</a></li>
	<li class="five"><a href="#" title="5 Stars">5</a></li>
	<li class="total">[60]</li>
</ul>
<h3>4 Stars Active</h3>
<ul class="rating fourstar">
	<li class="one"><a href="#" title="1 Star">1</a></li>
	<li class="two"><a href="#" title="2 Stars">2</a></li>

	<li class="three"><a href="#" title="3 Stars">3</a></li>
	<li class="four"><a href="#" title="4 Stars">4</a></li>
	<li class="five"><a href="#" title="5 Stars">5</a></li>
	<li class="total">[80]</li>
</ul>
<h3>5 Stars Active</h3>
<ul class="rating fivestar">
	<li class="one"><a href="#" title="1 Star">1</a></li>

	<li class="two"><a href="#" title="2 Stars">2</a></li>
	<li class="three"><a href="#" title="3 Stars">3</a></li>
	<li class="four"><a href="#" title="4 Stars">4</a></li>
	<li class="five"><a href="#" title="5 Stars">5</a></li>
	<li class="total">[100]</li>
</ul>
</body>

</html>
The image matrix star used for the rating system is:





And this image can be download at:

http://img11.imageshack.us/i/starmatrix.gif/