Как сменить цвет текста+изображение?

Question

[itcentr]

Приветствую!

Есть простенький редактор заказа вышивки на одежде
код https://codepen.io/itcentrpro/pen/MmRyab

Пользователь может ввести свой текст вышивки, выбрать изображение, цвет
Но не знаю как так сделать чтоб при нажатии на "цвет" менялись и цвет текста и цвет выбранной картинки
Под каждый цвет есть набор картинок( например: list2-red.png, list2-green.png list2-white.png list2-gold.png...
Сейчас для смены цвета текста при нажатии на цвет стоит событие onclick="$('div.text').css('color', '#ff9f08');"
что придумать чтоб выбранная картинка меняла цвет не знаю

Может кто подскажет? Желательно разжевать как нубу

Answer 1

[Антон Нагаец]

1) выводить svg SVG Tutorial
2) Убрать градиент (опционально чтобы меньше вам любиться с кодом)

Comments

[itcentr]

рисовалок или конвертеров в svg-код нету?

[Антон Нагаец]

itcentr: есть конечно. думаю по запросу png2svg вы найдете много информации.

Answer 2

[Mark]

jsfiddle.net/r8W9G/7
background-color: rgba(254, 254, 234, .29);
закомменть и посмотри

Comments

[Антон Нагаец]

background-color: rgba(0, 254, 123, .29); как пример. На белый тоже накладывается и получается не очень хорошо.

[itcentr]

на фон тоже накладывается((

[Mark]

так можно же сделать цвета отдельно для этих элементов и к каждому изображению свой цвет.
Но да, минус в том что ещё и картинки меняются