Как изменить звездное изображение звездного рейтинга Jquery с fyneworks на другое изображение

Я использую этот плагин: 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-изображения, и я действительно не понимаю gif и не знаю, как создать тот, который включает несколько изображений)

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

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

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


image jquery rating
person Pascal Klein    schedule 03.11.2010    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

person Stephen    schedule 03.11.2010
comment
проблема в том, что gif содержит звезду трех цветов (красный, желтый, серый), но png, насколько я знаю, может содержать только одно изображение! Но возможность изменить цвет изображения (например, при наведении) — одна из ключевых особенностей звездного рейтинга Jquery! - person Pascal Klein; 04.11.2010
comment
.gif и .png могут выглядеть одинаково: они оба просто изображения. Откройте файл .gif в любом редакторе изображений/программе просмотра файлов/предварительном просмотре изображений и посмотрите, как он устроен. Затем сделайте так, чтобы ваш .png выглядел так же. Техника, которую они используют, называется спрайтами изображений. Некоторые исследования в этой области оказались бы полезными. css-tricks.com/css-sprites - person Stephen; 04.11.2010
comment
Спасибо, это была моя проблема: я не понимал и не знал о концепции спрайтов изображений. Но я решил свою проблему сейчас. - person Pascal Klein; 04.11.2010

arrow_upward
1
arrow_downward

Все, что вам нужно сделать, это изменить фоновое изображение DIV и 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

person fyneworks    schedule 03.05.2014

arrow_upward
-1
arrow_downward

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

 div.star-rating,div.star-rating a{
    background:url(myimg.png) no-repeat 0 0px !important;
 }
person Xodarap    schedule 03.11.2010
comment
Возможно, !important даже не нужен - person Harmen; 03.11.2010
comment
Я бы не рекомендовал этого, потому что браузеру придется загружать оригинал и новый, даже если вы показываете только новый. Это один дополнительный http-запрос. - person Stephen; 03.11.2010
comment
@Stephen: проблема возникает тогда, когда они обновляют свой файл css, вам придется объединять свои изменения в каждом выпуске. CSS предназначен для каскадирования (отсюда и название), и правильным ответом является переопределение поведения по умолчанию с помощью пользовательской таблицы стилей. - person Xodarap; 03.11.2010
comment
Изложите свои рассуждения, пожалуйста. Что, если теоретически переопределить десять изображений с помощью пользовательской таблицы стилей. Это приведет к двадцати HTTP-запросам для десяти элементов, что фактически удвоит время загрузки веб-страницы для этих изображений и будет стоить вам денег в виде ненужной платы за пропускную способность. Каскадные тривиальные стили, такие как границы и цвета? да. Каскадные изображения? Конечно нет. - person Stephen; 03.11.2010
comment
@Stephen: как всегда, есть компромисс между временем программиста и производительностью. Стоимость этих вещей, конечно, идиосинкразическая, поэтому нельзя сделать никаких общих утверждений. Тем не менее, я могу вспомнить очень мало случаев, когда стоимость обслуживания ручного слияния каждого изменения была бы меньше, чем стоимость полосы пропускания. (Если у вас есть 20 изображений, вам, вероятно, следует распечатать их, если вы беспокоитесь о производительности...) - person Xodarap; 03.11.2010
comment
Неиспользование изображения, загруженного браузером, противоречит здравому смыслу. - person Stephen; 03.11.2010
comment
@Stephen: ты бы не стал спорить о преждевременной оптимизации, не так ли? - person Bane; 18.05.2012
comment
@Bane, вы будете удивлены, насколько медленным будет сайт с большим количеством изображений, особенно если вы загружаете изображения, которые не планируете использовать. Попробуйте это в мобильном. - person Stephen; 22.05.2012
comment
@ Стивен Нет, я бы не удивился. Но я считаю, что одним из первых принципов хорошей философии CS, по крайней мере, с 80-х годов было не оптимизировать преждевременно; всегда сначала измеряйте. Если вы не измеряли, вы не имеете права оптимизировать что-то, что в противном случае могло бы сэкономить время разработки. - person Bane; 23.05.2012