Помогите со скриптом
Всем привет, помогите найти или создать скрипт.
Идея такая, имеется изображение, рядом должны располагаться примеры расцветки или материал и при клике по ним озображение меняет цвет. примерно также как меняется окраска автомобиля на дилерских сайтах. Заранее благодарен.(просьба, если можно поподробней расписать, а то я только начинаю разбираться.) примерно так только не машина, а мой рисунок ![]() |
Вероятно, надо загрузить сразу несколько изображений в различных цветах, а при клике на соответствующий элемент просто подменять одно изображение другим.
|
это я понял, спасибо, так вот как сделать что бы при клике на цвет менялось изображение, точнее как прописать чтобы основная менялась?
|
С применением 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'); } ); Ещё раз повторюсь - никто не меняет кусочек изображения, закрашивая нужную его часть соответствующим цветом. Меняется картинка целиком. |
Да я понял, что будет меняться полностью картинка на аналогичную с измененными деталями.
еще такая просьба, подскажите как правильно поставить скрипт, что то я пытаюсь и не выходит. куда прописывать мои данные? |
<img src='/путь/к/изображению/по/умолчанию'>
<div data-src='/путь/к/альтернативному/изображению'> Ну и подключить jQuery или переписать обработчик события click. JS-код вставлять в конце документа. |
вот здесь посмотрите пример смены картинки http://trasser.ru/ или http://kz-102.narod2.ru/
код не даю ,сами нажмите просмотреть исходный код |
собственно сам скрипт вот он ...
<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,
<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. |