Электронная библиотека
Программисту веб-дизайнеру
Другие материалы
Библиотека: скачать готовые скрипты Javascript
Смена фонового цвета веб-страницы по выбору пользователя
При помощи приводимых ниже клиентских сценариев - скриптов Javascript - пользователь может выбрать фон веб-страницы из предлагаемого списка. Два вида разных программ.
Посмотрите на работу первого скрипта на отдельной веб-странице (персональный компьютер).
Выделите мышью приводимый ниже код, скопируйте его (командой Ctrl+C) и вставьте его (командой Ctrl+V) в html-код своей веб-страницы в нужное Вам место. Цвета фона можно назначать в любом количестве и по Вашему выбору (кодами).
<form> <select onChange="document.bgColor=this.options[this.selectedIndex].value"> <option value="123456" selected >Выберите цвет:</option> <option value="FF0000">красный</option> <option value="FFFF00">желтый</option> <option value="009966">зеленый</option> <option value="006699">синий</option> <option value="FFFFFF">белый</option> <option value="000000">черный</option> </select></form> </form>
Посмотрите на работу второго скрипта на отдельной веб-странице (персональный компьютер).
Фон страницы изменяется при проведении мышью над прямоугольниками с образцами цвета. Выделите мышью приводимый ниже код, скопируйте его (командой Ctrl+C) и вставьте его (командой Ctrl+V) перед командами </head> <body>.
<script language="javascript">
<!--
function SetBG(color)
{
document.bgColor = color;
}
//-->
</script>
Выделите мышью приводимый ниже код, скопируйте его (командой Ctrl+C) и вставьте его (командой Ctrl+V) в html-код своей веб-страницы в нужное Вам место тела страницы. Цвета фона можно назначать в любом количестве и по Вашему выбору (кодами). Для работы скрипта требуется пустой прозрачный файл GIF.
<table cellSpacing="0" cellPadding="0" height="18">
<tr>
<td > bg:
<td onmouseover="SetBG('#E3E6E9')" bgcolor="#E3E6E9"><img height="18"
src="../../../computer/java-script/null.gif" width="18" alt=""/></td>
<td onmouseover="SetBG('#CBD0D4')" bgcolor="#CBD0D4"><img height="18"
src="../../../computer/java-script/null.gif" width="18" alt=""/></td>
<td onmouseover="SetBG('#B2BAC0')" bgcolor="#B2BAC0"><img height="18"
src="../../../computer/java-script/null.gif" width="18" alt=""/></td>
<td onmouseover="SetBG('#99A4AD')" bgcolor="#99A4AD"><img height="18"
src="../../../computer/java-script/null.gif" width="18" alt=""/></td>
<td onmouseover="SetBG('#85939E')" bgcolor="#85939E"><img height="18"
src="../../../computer/java-script/null.gif" width="18" alt=""/></td>
<td onmouseover="SetBG('#6A7C8B')" bgcolor="#6A7C8B"><img height="18"
src="../../../computer/java-script/null.gif" width="18" alt=""/></td>
<td onmouseover="SetBG('#4C606F')" bgcolor="#4C606F"><img height="18"
src="../../../computer/java-script/null.gif" width="18" alt=""/></td>
<td onmouseover="SetBG('#334756')" bgcolor="#334756"><img height="18"
src="../../../computer/java-script/null.gif" width="18" alt=""/></td>
<td onmouseover="SetBG('#1D2F3D')" bgcolor="#1D2F3D"><img height="18"
src="../../../computer/java-script/null.gif" width="18" alt=""/></td>
<td onmouseover="SetBG('#000000')" bgcolor="#000000"><img height="18"
src="../../../computer/java-script/null.gif" width="18" alt=""/></td>
<td ><font size=2 face="verdana,arial,sans-serif"> back:
<td onmouseover="SetBG('#FFFFFF')" bgcolor="#FFFFFF"><img height="18"
src="../../../computer/java-script/null.gif" width="18" alt=""/></td>
</tr></table>
Сохраните себе этот прозрачный файл null.gif (размер 100х100 рх)
Нажмите правую кнопку мыши и выберите команду: "Save Picture As" ("Сохранить изображение как"), "Copy" ("Копировать").
Или просто скачайте файл null.gif
