Как поменять звездное изображение звездного рейтинга Jquery с разных работ на другое изображение - PullRequest
4 голосов
/ 03 ноября 2010

Я использую этот плагин: http://www.fyneworks.com/jquery/star-rating

Он включает star.gif (который на самом деле содержит звезду в трех разных цветах) и только один раз ссылается на этот gif во включенном css-файле:

div.star-rating,div.star-rating a{background:url(star.gif) no-repeat 0 0px}

Я больше не хочу использовать star.gif, но вместо этого использую свои собственные изображения в формате png. Как я могу это сделать?

Полагаю, будет три варианта:

  1. Создайте свой собственный myGif.gif и создайте ссылку на него в CSS-рейтинге jquery (который мне не нужен, потому что я хочу использовать свои .png-Images, и я действительно не понимаю gif и не знаю, как его создать). который включает в себя несколько изображений)

  2. Измените CSS-файл, чтобы он ссылался на мои .png-Images (проблема здесь заключается в том, что gif содержит звезду в трех разных цветах, а png содержит только одно изображение, поэтому цвет звезда больше не изменится)

  3. Может быть, изменить Javascript-файлы Jquery-Rating, чтобы он автоматически включал мои pngs?

Что бы вы порекомендовали? И как это сделать?

Ответы [ 3 ]

2 голосов
/ 03 ноября 2010

Это кажется довольно простым.Просто измените файл CSS, чтобы указать на ваши изображения.Это действительно единственное решение, которое имеет смысл.

1 голос
/ 03 мая 2014

Все, что вам нужно сделать, это изменить фоновое изображение DIVs и As, созданных плагином, например:

div.star-rating, div.star-rating a{
    background-image:url('/path/to/your/green-stars.gif');
}

Вот пример, который мы сделали: http://jsfiddle.net/tLuqJ/1/

А вот оригинальное изображение, которое вы можете использовать в качестве основы для создания своих собственных цветов: http://jquery -star-rating-plugin.googlecode.com / svn / trunk / star.gif

0 голосов
/ 03 ноября 2010

Переопределите это в своем собственном файле CSS:

 div.star-rating,div.star-rating a{
    background:url(myimg.png) no-repeat 0 0px !important;
 }
...