Сайт-хамелеон, изменение цвета сайта с помощью селектора цвета

Я хочу узнать, как я могу создать сайт, цвет фона и изображений которого будет изменяться пользователем. Цвета могли меняться только на один цвет в пределах 4 цветов, таких как зеленый, синий, белый и т. Д., На таких сайтах, как MSN, Yahoo и т. Д. Но на этих изображениях не было таких эффектов, как тень или наложение градиента. Однако я хочу изменить цвет изображений, к которым применены такие эффекты, как тень, наложение градиента. Причём с каждым цветом. Прямо как хамелеон.

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

Я изменил цвет фона изображения, который стал прозрачным, с помощью JavaScript DOM. Цвет прозрачной области на изображении будет таким же, как цвет фона тега div, содержащего это изображение. Но, если изображение имеет такие эффекты, как тень, наложение и т. д., изменение цвета будет отключено.

Как мне это сделать и какую технологию я буду использовать, jQuery, Ajax? Как я создаю сайт, цвет которого может меняться. Как я создаю сайт, цвет которого будет изменяться пользователем.

Как хамелеон...


image background-color background
person Maozturk    schedule 09.02.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хм, ну, это может занять некоторое время, если вы начинаете с небольшими знаниями.

Мое предложение, чтобы вы начали, состоит в том, чтобы иметь javascript, который изменяет класс элемента body в соответствии с выбором, который делает пользователь. Итак, допустим, я захожу на страницу, тег <body> не имеет класса, и используется css по умолчанию.

Затем я нажимаю на ссылку, чтобы сделать все красным. Используя javascript или jquery, присвойте телу класс "red-body".

Имейте css в своей таблице стилей, которая работает только для элементов, которые являются дочерними элементами элемента с этим классом.

Html:
<a href="" class="go-red">Go Red</a>

jQuery
$('.go-red').click(function(){$('body').removeClass();$('body').addClass('red-body');});

Итак, если у вас есть код вроде:

#navigation li{color:#000;}
.red-body #navigation li{color: #af000;}

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

Есть несколько способов сохранить выбор пользователей. Один из самых простых способов — установить куки в своем браузере. Вы можете сделать это с помощью javascript, вот введение от w3schools: http://www.w3schools.com/JS/js_cookies.asp

person daveyfaherty    schedule 10.02.2011