Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.11.2013, 16:17
Новичок на форуме
Отправить личное сообщение для Letto Посмотреть профиль Найти все сообщения от Letto
 
Регистрация: 16.06.2013
Сообщений: 6

Смена фона картинки при клике на иконку
Всем привет
есть следующий код:
<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>

на сайте это выглядит вот так:

то есть при клике на иконку с соответствующим цветом, основная картинка меняет свой фон на необходимый + текст в заголовке также меняется на соответствующий.
вопрос: как мне добавить чтобы при клике на иконку подгружалась определенная текстура (картинка)? буду рад любой помощи
Ответить с цитированием
  #2 (permalink)  
Старый 08.11.2013, 16:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Letto
как мне добавить чтобы при клике на иконку подгружалась определенная текстура (картинка)?
Как вариант...
- у пикторгаммки цвета добавить атрибут с УРЛом нужной картинки
- при клике на пиктограммку заменять УРЛ картинки на нужный (из атрибута)
Ответить с цитированием
  #3 (permalink)  
Старый 08.11.2013, 18:31
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Фотошоп в руки и вперёд

Создаём обычное изображение с белым фоном, по центру этого изображение пихаем наше изображение (на новый слой), задаём ему прозрачность (примерно 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;


Таким образом, у нас есть белое изображение, с полупрозрачной дыркой по середине, сама дырка - нужная нам полупрозрачная "текстура". Через стили меняем цвет фона изображения и этот фон будет слегка виден через полупрозрачную текстуру и даст такой же эффект, как показан на Вашем скриншоте.

Последний раз редактировалось ruslan_mart, 08.11.2013 в 18:33.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кратное увеличение при клике на кнопку vabus Элементы интерфейса 2 15.04.2013 20:42
Смена картинок при клике fiphiker Events/DOM/Window 10 26.01.2013 14:40
Смена картинок при клике ссылку illuminat jQuery 3 14.09.2012 17:50
Смена фона при наведении Crystal Элементы интерфейса 3 13.10.2011 12:23
Смена картинки в шапке при перезагрузки wcb-falcon Элементы интерфейса 12 13.07.2010 23:36