Смена фона картинки при клике на иконку
Всем привет:)
есть следующий код: <div class="blockin"> <img src="/public/uploads/images/profnastil/C-21.png" class="color_image"/> </div> <div class="block-color"> <strong>Выберите цвет:</strong><p></p> <div class="color_maker"> <div class="color_example" data-color="#d1c86e" style="background-color: #d1c86e;"></div> <div class="color_example" data-color="#e4da9c" style="background-color: #e4da9c;"></div> <div class="color_example" data-color="#f4d714" style="background-color: #f4d714;"></div> <div class="color_example" data-color="#650a0e" style="background-color: #650a0e;"></div> </div> </div> <script> $(function(){ $('.color_example').click(function(){ var colors = { "#d1c86e": "RAL 1014: ivory (слоновая кость)", "#e4da9c": "RAL 1015: light ivory ( светлая слоновая кость )", "#f4d714": "RAL 1018: zinc yellow ( цинково-желтый )", "#650a0e": "RAL 3003: ruby red ( рубиново красный )", }; var color = $(this).attr('data-color'); $('.color_image').css('background-color', color); $('.color_text').html(colors[color]); }); }); </script> на сайте это выглядит вот так: ![]() то есть при клике на иконку с соответствующим цветом, основная картинка меняет свой фон на необходимый + текст в заголовке также меняется на соответствующий. вопрос: как мне добавить чтобы при клике на иконку подгружалась определенная текстура (картинка)? буду рад любой помощи:help: |
Цитата:
- у пикторгаммки цвета добавить атрибут с УРЛом нужной картинки - при клике на пиктограммку заменять УРЛ картинки на нужный (из атрибута) |
Фотошоп в руки и вперёд :)
Создаём обычное изображение с белым фоном, по центру этого изображение пихаем наше изображение (на новый слой), задаём ему прозрачность (примерно 50%), затем, кликаем по нашему изображению правой кнопкой мыши > загрузить выделенную область. Теперь область нашего изображения выделена, переходим на слой "белого фона", нажимаем delete и выделенная область удаляет кусок белого фона по середине :) Объединяем слои, сохраняем изображение в *png. А дальше уже всё дело ловкости рук :) <img alt="" id="test" src="image.png" /> <input onclick="imgColor('red')" type="button" value="Красный" /> <input onclick="imgColor('green')" type="button" value="Зелёный" /> <input onclick="imgColor('blue')" type="button" value="Голубой" /> function imgColor(color) { imgColor.elem.backgroundColor = color; } imgColor.elem = document.getElementById('test').style; Таким образом, у нас есть белое изображение, с полупрозрачной дыркой по середине, сама дырка - нужная нам полупрозрачная "текстура". Через стили меняем цвет фона изображения и этот фон будет слегка виден через полупрозрачную текстуру и даст такой же эффект, как показан на Вашем скриншоте. :) |
Часовой пояс GMT +3, время: 17:15. |