Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Как в option select при смене под категории изменяется изображение и как в option добавить иконки и изменить стиль?

Артём Богатенков Знаток (258), на голосовании 8 лет назад
Помогите пожалуйста есть пример на этом сайте http://autoretail.ru/ в разделе "создать дизайн автоковриков", нужен точно такой же тип формы но с другим товаром. Сам стиль и отправку на почту сделал с калькулятором, но не как не могу понять как переключает option select изображение при смене категории. И 2 как в option добавлена иконки и поменян стиль? если кто может помогите с разъяснением!
Голосование за лучший ответ
dim565 Искусственный Интеллект (424764) 8 лет назад
Напишу в общем виде.

На том сайте option select выводится через html или php, но он не отображается посетителю (display: none), а формируется в этом стильном виде при помощи jquery скрипта (если не ошибаюсь, то вот этим plugins.jquery.com/ui.selectmenu).

Добавление картинок в список тоже сделано скриптом (похоже самописным). В скрытом select изначально содержатся адреса картинок для каждого пункта (data-icon). Например:
option value="Антроцит" data-id="1" data-icon="i/step9/1.png">Антроцит (data-icon содержит путь до мини-картинки).

А скрипт (autoretail.ru/js/main.js) делает так:
$('', {
css: {'backgroundImage': 'url('+item.element.data('icon')+')'}
})
.appendTo(li);

Фото товара при смене категории сделано тоже скриптом main.js.
В каждом select содержится data-id, который затем будет использоваться как путь картинок.
Скрипт делает так:
var confUpdate = function(){
var step2_id = $('select[name="step[2]"] option:selected').data('id');
var step3_id = $('select[name="step[3]"] option:selected').data('id');
var step4_id = $('select[name="step[4]"] option:selected').data('id');
var step5_id = $('input[name="step[5]"]:checked').data('id');
step5_id = (step5_id != 2) ? 1 : 2;

$('.step-9 img.s-2').attr('src', 'i/step9/2/'+step5_id+'/'+step2_id+'/'+step4_id+'.png');
$('.step-9 img.s-3').attr('src', 'i/step9/3/'+step3_id+'.png');
$('.step-9 img.s-3-2').attr('src', 'i/step9/3-2/'+step3_id+'.png');
$('.step-9 img.s-4').attr('src', 'i/step9/4/'+step4_id+'.png');
т. е добавляет к фото товара четыре картинки в зависимости от выбора (они накладываются друг на друга, это уже сделано в CSS)
Похожие вопросы