Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помогите со скриптом (https://javascript.ru/forum/dom-window/33742-pomogite-so-skriptom.html)

wild 06.12.2012 08:51

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

Заранее благодарен.(просьба, если можно поподробней расписать, а то я только начинаю разбираться.)
примерно так только не машина, а мой рисунок

Sanda 06.12.2012 09:02

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

wild 06.12.2012 09:06

это я понял, спасибо, так вот как сделать что бы при клике на цвет менялось изображение, точнее как прописать чтобы основная менялась?

Sanda 06.12.2012 09:36

С применением 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');
  }
);


Ещё раз повторюсь - никто не меняет кусочек изображения, закрашивая нужную его часть соответствующим цветом. Меняется картинка целиком.

wild 06.12.2012 09:57

Да я понял, что будет меняться полностью картинка на аналогичную с измененными деталями.
еще такая просьба, подскажите как правильно поставить скрипт, что то я пытаюсь и не выходит.
куда прописывать мои данные?

Sanda 06.12.2012 10:12

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

Ну и подключить jQuery или переписать обработчик события click. JS-код вставлять в конце документа.

Александр 60 лет 06.12.2012 11:34

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

Александр 60 лет 06.12.2012 11:55

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

<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 , например по клику мыши

wild 06.12.2012 12:17

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

lord2kim 06.12.2012 17:07

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>


Часовой пояс GMT +3, время: 06:08.