Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.12.2012, 08:51
Новичок на форуме
Отправить личное сообщение для wild Посмотреть профиль Найти все сообщения от wild
 
Регистрация: 06.12.2012
Сообщений: 5

Помогите со скриптом
Всем привет, помогите найти или создать скрипт.
Идея такая, имеется изображение, рядом должны располагаться примеры расцветки или материал и при клике по ним озображение меняет цвет. примерно также как меняется окраска автомобиля на дилерских сайтах.

Заранее благодарен.(просьба, если можно поподробней расписать, а то я только начинаю разбираться.)
примерно так только не машина, а мой рисунок
Ответить с цитированием
  #2 (permalink)  
Старый 06.12.2012, 09:02
Аспирант
Отправить личное сообщение для Sanda Посмотреть профиль Найти все сообщения от Sanda
 
Регистрация: 12.10.2012
Сообщений: 90

Вероятно, надо загрузить сразу несколько изображений в различных цветах, а при клике на соответствующий элемент просто подменять одно изображение другим.
Ответить с цитированием
  #3 (permalink)  
Старый 06.12.2012, 09:06
Новичок на форуме
Отправить личное сообщение для wild Посмотреть профиль Найти все сообщения от wild
 
Регистрация: 06.12.2012
Сообщений: 5

это я понял, спасибо, так вот как сделать что бы при клике на цвет менялось изображение, точнее как прописать чтобы основная менялась?
Ответить с цитированием
  #4 (permalink)  
Старый 06.12.2012, 09:36
Аспирант
Отправить личное сообщение для Sanda Посмотреть профиль Найти все сообщения от Sanda
 
Регистрация: 12.10.2012
Сообщений: 90

С применением jQuery:

<img alt="" src="image1.jpg" id="image" />
<div class="colorBox">
  <div class="color" data-src="image1.jpg">Цвет 1</div>
  <div class="color" data-src="image2.jpg">Цвет 2</div>
  <div class="color" data-src="image3.jpg">Цвет 3</div>
</div>


$('.colorBox').on(
  'click'
  , '.color'
  , function (evt) {
    document.getElementById('image').src = evt.currentTarget.getAttribute('data-src');
  }
);


Ещё раз повторюсь - никто не меняет кусочек изображения, закрашивая нужную его часть соответствующим цветом. Меняется картинка целиком.
Ответить с цитированием
  #5 (permalink)  
Старый 06.12.2012, 09:57
Новичок на форуме
Отправить личное сообщение для wild Посмотреть профиль Найти все сообщения от wild
 
Регистрация: 06.12.2012
Сообщений: 5

Да я понял, что будет меняться полностью картинка на аналогичную с измененными деталями.
еще такая просьба, подскажите как правильно поставить скрипт, что то я пытаюсь и не выходит.
куда прописывать мои данные?
Ответить с цитированием
  #6 (permalink)  
Старый 06.12.2012, 10:12
Аспирант
Отправить личное сообщение для Sanda Посмотреть профиль Найти все сообщения от Sanda
 
Регистрация: 12.10.2012
Сообщений: 90

<img src='/путь/к/изображению/по/умолчанию'>
<div data-src='/путь/к/альтернативному/изображению'>

Ну и подключить jQuery или переписать обработчик события click. JS-код вставлять в конце документа.
Ответить с цитированием
  #7 (permalink)  
Старый 06.12.2012, 11:34
Кандидат Javascript-наук
Отправить личное сообщение для Александр 60 лет Посмотреть профиль Найти все сообщения от Александр 60 лет
 
Регистрация: 02.11.2012
Сообщений: 116

вот здесь посмотрите пример смены картинки http://trasser.ru/ или http://kz-102.narod2.ru/
код не даю ,сами нажмите просмотреть исходный код

Последний раз редактировалось Александр 60 лет, 06.12.2012 в 11:39.
Ответить с цитированием
  #8 (permalink)  
Старый 06.12.2012, 11:55
Кандидат Javascript-наук
Отправить личное сообщение для Александр 60 лет Посмотреть профиль Найти все сообщения от Александр 60 лет
 
Регистрация: 02.11.2012
Сообщений: 116

собственно сам скрипт вот он ...

<script type="text/javascript" language="javascript">
var z= 0;
var n=0;
function T1()
{z= z+1 ; document.f1.src= "aaa"+n+".jpg?"+z }
var t = setInterval(T1,1000);

</script>

изменяйте n , например по клику мыши
Ответить с цитированием
  #9 (permalink)  
Старый 06.12.2012, 12:17
Новичок на форуме
Отправить личное сообщение для wild Посмотреть профиль Найти все сообщения от wild
 
Регистрация: 06.12.2012
Сообщений: 5

Всем огромное спасибо, навели на много мыслей.
все равно не могу понять как заставить его работать....
но буду пытаться.
Ответить с цитированием
  #10 (permalink)  
Старый 06.12.2012, 17:07
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

wild,
<img src="color1.jpg" id="img">
<a href="#color1" class="abc">Цвет 1</a>
<a href="#color2" class="abc">Цвет 2</a>
<a href="#color3" class="abc">Цвет 3</a>
<a href="#color4" class="abc">Цвет 4</a>
<a href="#color5" class="abc">Цвет 5</a>
<script>
window.onload = function () {
	document.body.onclick = function (e) {
		e = e || event;
		target = e.target || e.srcElement;
		if (target.tagName == "A" && target.className == "abc" && target.href.indexOf("#")) {
			document.getElementById("img").src = target.href.split("#")[1]+".jpg";
		}
	}
}
</script>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться со скриптом Ваяс Events/DOM/Window 0 15.06.2012 20:33
Помогите со скриптом. unq Общие вопросы Javascript 8 11.01.2011 16:36
помогите с скриптом $12ANDRE12$ Firefox/Mozilla 2 12.05.2009 21:46
Помогите со скриптом Pilageen Общие вопросы Javascript 5 13.04.2009 14:13
Помогите со скриптом. Harper Общие вопросы Javascript 13 22.03.2009 21:22