|
Как зделать такое?
Долго копался по интернету, ничего похожего не нашел...
Как сделать вот такую фигню ![]() При клике на квадратик с цветом, фотка слева меняется... Кто нить помогите! Кинте скриптом, или советом... |
Вариантов много. Один из:
сделать спрайт из возможных вариантов, прописать для кааждого варианта class, который менял бы координаты top свойства background-position, а при клике, просто добавлять/убирать тот или иной класс. Про события можно почитать тут |
Gibor21,
обычное дело, ставьте событие при клике на картинку с цветом, если выбрана картинка с красным цветом - загружать подстолье с этим цветом. На каждое подстолье - своя цветная картинка. |
Блин, спасибо!:)
|
Цитата:
:( Не могли бы вы, привести пример с кодом, для наглядности? |
А в чем проблема? Нужно просто две картинки с разным з-индексом. На верхней основная часть а на той, что внизу, то что нужно менять. В верхней картинке нужно сделать вырез (прозрачность) и через нее будет видно нижнюю. Еще можно сделать 3 картинки. Работает так:
1. Верхняя с прозрачностью. 2. С текущим цветом. 100% непрозрачность слоя 3. С цветом на который переключаемся. 0% непрозрачность слоя И с определенной скоростью прозрачность одного слоя уменьшается, а второго увеличивается. Вроде бы красиво :) |
Верхняя часть
![]() Рисунок или просто цветная панель - подложка. ![]() Результат: ![]() При нажатии на кнопку можно просто менять стиль подложки на нужный цвет. PS. Только дырку вырезать нужно аккуратно. |
JAre, конкретно для этого случая — это неоправданно сложный и неудобный вариант. Легче и лучше просто сделать смену картинки.
|
За то очень легко добавить новые цвета и анимацию. Вообще, всё зависит от количества цветов и моделей.
А почему неудобный? Там так и так нужен JS или можно CSS обойтись? В моем варианте тоже только стили нужно свапать. |
Дешевый для себя вариант и самый правильный менять фотки которые потребовать у заказчика, дорогой для себя вариант попробовать их красить - выйдет уродливо, но дешево для заказчика(этот вариант не верный т.к. выйдет точно и проверено уродливо если не использовать 3D).
|
Часовой пояс GMT +3, время: 07:37. |
|