Javascript.RU

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

Как зделать такое?
Долго копался по интернету, ничего похожего не нашел...
Как сделать вот такую фигню

При клике на квадратик с цветом, фотка слева меняется...
Кто нить помогите! Кинте скриптом, или советом...
Ответить с цитированием
  #2 (permalink)  
Старый 05.03.2010, 12:14
Аспирант
Отправить личное сообщение для neurostep Посмотреть профиль Найти все сообщения от neurostep
 
Регистрация: 10.04.2008
Сообщений: 83

Вариантов много. Один из:
сделать спрайт из возможных вариантов, прописать для кааждого варианта
class, который менял бы координаты top свойства background-position, а при клике, просто добавлять/убирать тот или иной класс.
Про события можно почитать тут
Ответить с цитированием
  #3 (permalink)  
Старый 05.03.2010, 12:17
Любитель
Отправить личное сообщение для JsLoveR Посмотреть профиль Найти все сообщения от JsLoveR
 
Регистрация: 16.12.2009
Сообщений: 422

Gibor21,
обычное дело, ставьте событие при клике на картинку с цветом, если выбрана картинка с красным цветом - загружать подстолье с этим цветом.
На каждое подстолье - своя цветная картинка.
Ответить с цитированием
  #4 (permalink)  
Старый 05.03.2010, 12:19
Интересующийся
Отправить личное сообщение для Gibor21 Посмотреть профиль Найти все сообщения от Gibor21
 
Регистрация: 05.03.2010
Сообщений: 16

Блин, спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 06.03.2010, 03:31
Интересующийся
Отправить личное сообщение для Gibor21 Посмотреть профиль Найти все сообщения от Gibor21
 
Регистрация: 05.03.2010
Сообщений: 16

Сообщение от JsLoveR Посмотреть сообщение
Gibor21,
обычное дело, ставьте событие при клике на картинку с цветом, если выбрана картинка с красным цветом - загружать подстолье с этим цветом.
На каждое подстолье - своя цветная картинка.
Тут попробовал сделать, и никак не получается, может я не так понял.

Не могли бы вы, привести пример с кодом, для наглядности?
Ответить с цитированием
  #6 (permalink)  
Старый 06.03.2010, 08:40
Кандидат Javascript-наук
Отправить личное сообщение для JAre Посмотреть профиль Найти все сообщения от JAre
 
Регистрация: 29.06.2009
Сообщений: 111

А в чем проблема? Нужно просто две картинки с разным з-индексом. На верхней основная часть а на той, что внизу, то что нужно менять. В верхней картинке нужно сделать вырез (прозрачность) и через нее будет видно нижнюю. Еще можно сделать 3 картинки. Работает так:
1. Верхняя с прозрачностью.
2. С текущим цветом. 100% непрозрачность слоя
3. С цветом на который переключаемся. 0% непрозрачность слоя
И с определенной скоростью прозрачность одного слоя уменьшается, а второго увеличивается. Вроде бы красиво
Ответить с цитированием
  #7 (permalink)  
Старый 06.03.2010, 09:39
Кандидат Javascript-наук
Отправить личное сообщение для JAre Посмотреть профиль Найти все сообщения от JAre
 
Регистрация: 29.06.2009
Сообщений: 111

Верхняя часть

Рисунок или просто цветная панель - подложка.

Результат:


При нажатии на кнопку можно просто менять стиль подложки на нужный цвет.

PS. Только дырку вырезать нужно аккуратно.
Ответить с цитированием
  #8 (permalink)  
Старый 06.03.2010, 12:13
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

JAre, конкретно для этого случая — это неоправданно сложный и неудобный вариант. Легче и лучше просто сделать смену картинки.
Ответить с цитированием
  #9 (permalink)  
Старый 06.03.2010, 15:01
Кандидат Javascript-наук
Отправить личное сообщение для JAre Посмотреть профиль Найти все сообщения от JAre
 
Регистрация: 29.06.2009
Сообщений: 111

За то очень легко добавить новые цвета и анимацию. Вообще, всё зависит от количества цветов и моделей.

А почему неудобный? Там так и так нужен JS или можно CSS обойтись? В моем варианте тоже только стили нужно свапать.
Ответить с цитированием
  #10 (permalink)  
Старый 06.03.2010, 15:45
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

Дешевый для себя вариант и самый правильный менять фотки которые потребовать у заказчика, дорогой для себя вариант попробовать их красить - выйдет уродливо, но дешево для заказчика(этот вариант не верный т.к. выйдет точно и проверено уродливо если не использовать 3D).
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сохранить данные в файл? Возможно такое на JavaScript? Forgott Общие вопросы Javascript 35 26.06.2015 19:11
Открытие div блока при первом визите на сайт Nushaba Общие вопросы Javascript 28 20.12.2013 21:24
О наследовании событий, или как корректно его отменить. JCShen Events/DOM/Window 8 09.02.2010 00:00
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 23:20
А как зделать скрипт, чтобы например скрипт 1 заменялся скриптом 2? yura371 Общие вопросы Javascript 3 06.01.2009 22:40