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

Im с помощью этого плагина: http://www.fyneworks.com/jquery/star-rating Как изменить звездный образ Jquery звездочек от fyneworks на другое изображение

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

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

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

Я думаю, было бы три варианта:

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

Что вы посоветуете? А как это сделать?

источник

2010-11-03 Pascal Klein

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

источник

2010-11-03 16:18:50 Stephen

проблема в том, что gif содержит звезду в трех цветах (красный, желтый, серый), но png может содержать только одно изображение, насколько я знаю! Но возможность изменить цвет изображения (например, на-hover) является одной из ключевых особенностей рейтинга JQuery! –

'.gif' и' .png' могут выглядеть одинаково: они оба - только изображение. Откройте файл '.gif' в любом редакторе изображений/просмотра файлов/предварительного просмотра и посмотрите, как он построен. Затем сделайте свой '.png' похожим. Техника, которую они используют, называется «образными спрайтами». Некоторые исследования в этой области окажутся полезными. http://css-tricks.com/css-sprites/ – Stephen

Спасибо, это была моя проблема: я не понимал и не знал о концепции спрайтов изображений. Но я решил проблему сейчас. –

-1

Override его в отдельном файле CSS:

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

источник

2010-11-03 16:18:03 Xodarap

Возможно, важна даже важная информация – Harmen

Я бы не рекомендовал это, потому что браузер будет придется загружать оригинал и новый, даже если вы только показываете новый. Это один дополнительный HTTP-запрос. – Stephen

@Stephen: проблема возникает тогда, когда они обновляют свой файл css, вам придется объединить свои изменения в каждую версию. CSS предназначен для каскадирования (отсюда и название) и переопределения поведения по умолчанию с помощью специальной таблицы стилей - правильный ответ. – Xodarap

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

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

источник

2014-05-03 08:59:44 fyneworks

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

ответ

Смежные вопросы