Менюшка. DIV с меняющимся цветом.

369

05 августа 2010 года

451 / / 09.10.2007

Привет всем.

Перерыл много интернетов в поисках оптимального способа сделать элементы с меняющимся цветом фона.

Ну и "придумал" свой способ, который легко интегрируется куда угодно, в любой элемент (от div до body).

Итак, меню на DIV'ах с меняющимся фоном. Способ с использованием JavaScript.

описание элемента, к которому будет применяться эффект:

Код:

<div &#111;&#110;MouseOver="cup(this);" &#111;&#110;MouseOut="cdown(this);"> Какой-нить текст</div>

Javascript который ведет обработку:

Код:

<script language="javascript">
function cup(obj) {

obj.style.background="#0099FF";

obj.style.color="#FFFFFF";
}
function cdown(obj) {

obj.style.background="white";

obj.style.color="#0099FF";
}
</script>

То есть: при наведении на нужный блок курсора, он вызывает событие cup() которое придаёт фону голубой цвет, а тексту в этом блоке - белый.
при отведении курсора вызывается событие cdown() который возвращает предыдущий цвет фона (в моем случае - белый) и цвет текста.

Для чего делать это жаваскриптом на не чистым CSSом?

Ну во-первых, у меня так и не получилось заставить работать стиль с :hover (кто знает как заставить работать класс с ховером - в пм плз).
А во вторых, это даёт нам возможность по-куралесить... Например так:

Меняем java script:

Свернуть исходник

Код:

<script language="javascript">
function cup(obj) {

obj.style.background="#"+randcolor();

obj.style.color="#FFFFFF";
}
function cdown(obj) {

obj.style.background="white";

obj.style.color="#0099FF";
}
function randcolor() {rflags = new Array ('0','1','2','3','4','5','6','7','8','9','0','A','B','C','D','E','F');colors='';
for (i=0; i<6; i++){numb=Math.floor(Math.random()*15);colors+=rflags[numb];}return colors;}

</script>

Что получим? Получим абсолютно случайный цвет фона при каждом наведении...
Как это работает??? На примите на рекламу, но я тут начал клепать свой бложик в свободное время... пример такого "случайного" бэкграунда можете посмотреть на нём (блог не рабочий, там тупо вёрстка). не рекламо.
_ttp://kzavr.co.cc

В чем суть последнего скрипта?
Вызывается дополнительная функция, которая случайным образом генерит HEX-код цвета... ИМХО - получилось забавно.

Хинт: Если на body поставить эвент onMouseMove="cup(this);" то можно сделать страничку для уничтожения психически нездоровых людей (очень быстро меняются цвета).

Подписаться на вопросНеобходима регистрация

Ваш аккаунт

Последние темы форума

Почтовая рассылка

Менюшка. DIV с меняющимся цветом.

24 ответа