Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как зделать такое? (https://javascript.ru/forum/dom-window/8069-kak-zdelat-takoe.html)

Gibor21 05.03.2010 11:54

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

При клике на квадратик с цветом, фотка слева меняется...
Кто нить помогите! Кинте скриптом, или советом...

neurostep 05.03.2010 12:14

Вариантов много. Один из:
сделать спрайт из возможных вариантов, прописать для кааждого варианта
class, который менял бы координаты top свойства background-position, а при клике, просто добавлять/убирать тот или иной класс.
Про события можно почитать тут

JsLoveR 05.03.2010 12:17

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

Gibor21 05.03.2010 12:19

Блин, спасибо!:)

Gibor21 06.03.2010 03:31

Цитата:

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

Тут попробовал сделать, и никак не получается, может я не так понял.
:(
Не могли бы вы, привести пример с кодом, для наглядности?

JAre 06.03.2010 08:40

А в чем проблема? Нужно просто две картинки с разным з-индексом. На верхней основная часть а на той, что внизу, то что нужно менять. В верхней картинке нужно сделать вырез (прозрачность) и через нее будет видно нижнюю. Еще можно сделать 3 картинки. Работает так:
1. Верхняя с прозрачностью.
2. С текущим цветом. 100% непрозрачность слоя
3. С цветом на который переключаемся. 0% непрозрачность слоя
И с определенной скоростью прозрачность одного слоя уменьшается, а второго увеличивается. Вроде бы красиво :)

JAre 06.03.2010 09:39

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

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

Результат:


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

PS. Только дырку вырезать нужно аккуратно.

Octane 06.03.2010 12:13

JAre, конкретно для этого случая — это неоправданно сложный и неудобный вариант. Легче и лучше просто сделать смену картинки.

JAre 06.03.2010 15:01

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

А почему неудобный? Там так и так нужен JS или можно CSS обойтись? В моем варианте тоже только стили нужно свапать.

Gozar 06.03.2010 15:45

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


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