Динамическое изменение цвета полоски
прокрутки в 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, или
другие.
А Вот пример использования того, что мы
рассмотрели:
Кликните по ссылке, чтобы изменить цвет:
Красный
Оранжевый
Жёлтый
Зелёный
Синий
Наведите курсор мышки, чтобы изменить цвет:
Красный
Оранжевый
Жёлтый
Зелёный
Синий
|