Используйте jQuery Подключаемый модуль звездного рейтинга.
См. 2-ю часть для метода Только CSS.
Вот скриншот из плагин jQuery Star Rating< /а>. На вкладке Интеграция с базой данных есть больше примеров подключаемых модулей, и вы всегда можете выполнить поиск дополнительных подключаемых модулей jQuery Star ЗДЕСЬ, если вам это нужно.
Снимок экрана: 
Ссылка:
демонстрация jsFiddle для плагина jQuery Star Rating
Скриншот демонстрации jsFiddle jQuery Star Rating:
Минимальная HTML-разметка, которую использует плагин jQuery Star Rating (полностью настраиваемый):
<span class="bookFiveStar">
<input name="book002" type="radio" class="star" disabled="disabled"/>
<input name="book002" type="radio" class="star" disabled="disabled"/>
<input name="book002" type="radio" class="star" disabled="disabled" checked="checked"/>
<input name="book002" type="radio" class="star" disabled="disabled"/>
<input name="book002" type="radio" class="star" disabled="disabled"/>
</span>
Выше и ниже приведены ДВА очень разных решения для этого ответа.
Используйте чистую систему рейтинга CSS без подключаемого модуля jQuery или JavaScript.
См. 1-ю часть выше для метода плагина звездного рейтинга jQuery.
Исходное изображение взято из горячая ссылка imageshack .us и показано ниже.
Размеры width:98px; и height:143px;, тип изображения jpg.
Ссылка:
демонстрация jsFiddle для рейтинга Pure CSS
Скриншот демонстрации jsFiddle Pure CSS:
Минимальный HTML:
<div class="starsCSS">
<img class="stars3" title="3 Stars" src="http://img366.imageshack.us/img366/6441/stars.jpg" alt="Star Rating Image" />
</div>
Полный CSS:
/* This class name configures and positions the 6 star image block. */
.starsCSS{
/* The width of the star block uses the entire star.jpg width */
width: 98px;
/* The height of the star block is LIMITED to 23px, i.e. 1 star row. */
height: 23px;
/* This overflow:hidden will ensure only 1 row is ever seen, when aligned properly.
/* That said, later below different classname uses margin-top negitive offset to align. */
overflow: hidden;
/* The placement of the star block is relative to other elements. Adjust px here. */
position: relative;
top: 10px;
left: 155px;
/* Simple light blue border is provided for the image./
/* Your cusom star image may be a .png with transparency so remove this setting. */
border: 2px solid DodgerBlue;
}
/* This CSS Selector consists of classname .starsCSS that has 'img tag'. */
/* This rule will set original image width and original image height for stars.jpg file. */
.starsCSS img{
width: 98px;
height: 143px;
}
/* These 6 classes will position the image so that only the relevant "star row" is seen for .starsCSS */
/* Technically, this first class .stars1 is not needed since nothing changes. */
/* Note stars.jpg is used full width (98px), therefore it's 1 column. */
/* Use margin-left with negative value if your custom image.jpg has 2 or more columns */
/* IF stars.jpg was double in width then "margin-left: -98px;" will hide first column */
.stars1{
margin-top: 0px;
}
/* Reference Image: 143px height divide by 6 star rows = 23.833333px per row. */
/* Hence, star.jpg image is not perfect and it's rounded to 24px per row instead */
/* Since 1 star row is 24px high, classname .stars2 will offset that to get to next row. */
/* That said, the value needs to be negitive since entire image is shifted up (offset). */
/* The class .starsCSS will now show the second star row! */
.stars2{
margin-top: -24px; /* Shift up star row 1 */
}
.stars3{
margin-top: -48px; /* Shift up star rows 1 and 2 */
}
.stars4{
margin-top: -72px; /* Shift 3 rows of stars out of view (24 x 3 = 72 ) */
}
.stars5{
margin-top: -96px; /* Shift 4 rows of stars out of view */
}
.stars6{
margin-top: -120px; /* Shift 5 rows of stars out of view */
}
person
arttronics
schedule
01.07.2012
