15 мая 2023 года "Исходники.РУ" отмечают своё 23-летие!
Поздравляем всех причастных и неравнодушных с этим событием!
И огромное спасибо всем, кто был и остаётся с нами все эти годы!

Главная Форум Журнал Wiki DRKB Discuz!ML Помощь проекту


Динамическое изменение цвета полоски прокрутки в IE5.5 и выше.

Автор: etLux

Здесь представлен скрипт, позволяющий динамически менять цвет скролбаров (scrollbars) на страничке при помощи обыкновенной функции JavaScript. Так же будет рассмотрено, как связать функцию изменения цвета полосок прокрутки с ссылками и событием mouseOver.

Шаг 1. Необязательный стиль

Изначально, цвет скролбаров можно установить при помощи стиля <style> ... </style> в заголовке страницы (обычно это #C0C0C0):

<style>
body{
scrollbar-base-color: #C0C0C0
}
</style>

============================================================

Шаг 2. Скрипт

Поместите следующий код <script ... </script> в заголовок Вашей страницы. Код как говорится полность готов к употреблению и не требует доработок:

<script>

// (C) 2001 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header

function changeScrollbarColor(C){
if (document.all){
document.body.style.scrollbarBaseColor = C
}
}

</script>

============================================================

Шаг 3. Вызов скрипта

Чтобы установить цвет, достаточно вызвать функцию с параметром значения цвета в формате #FFFFFF. (Обратите внимание на одинарные и двойные кавычки!)

Обычно функции вызываются через ссылки:

<a href="javascript:changeScrollbarColor('#FF0000')">Change to Red</a><br>
<a href="javascript:changeScrollbarColor('#FF8000')">Change to Orange</a><br>
<a href="javascript:changeScrollbarColor('#FFFF00')">Change to Yellow</a><br>
<a href="javascript:changeScrollbarColor('#00FF00')">Change to Green</a><br>
<a href="javascript:changeScrollbarColor('#4444FF')">Change to Blue</a><br>

Так же код функции можно вызвать из различных событий мышки;
Следующий под меняет цвета скролбара при наведении курсора мышки на ссылки:

<a href="#" onMouseOver="changeScrollbarColor('#FF0000')">Change to Red</a><br>
<a href="#" onMouseOver="changeScrollbarColor('#FF8000')">Change to Orange</a><br>
<a href="#" onMouseOver="changeScrollbarColor('#FFFF00')">Change to Yellow</a><br>
<a href="#" onMouseOver="changeScrollbarColor('#00FF00')">Change to Green</a><br>
<a href="#" onMouseOver="changeScrollbarColor('#4444FF')">Change to Blue</a><br>

Так же можно использовать события onMouseOut, onClick, или другие.

А Вот пример использования того, что мы рассмотрели:

Кликните по ссылке, чтобы изменить цвет:

Красный
Оранжевый
Жёлтый
Зелёный
Синий


Наведите курсор мышки, чтобы изменить цвет:

Красный
Оранжевый
Жёлтый
Зелёный
Синий