Украшательства. (изображение в кнопке, изменение шрифта текста кнопки, подсвечивание).
| Добавить в Избранное. Вверх |
На своей странице Вы можете установить кнопку, при нажатии на которую пользователь добавлял бы ее в Избранное:
<FORM>
<BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://lenininc.narod.ru/', 'LENIN INC'); return false;"> Добавить в избранное </BUTTON>
</FORM>
В вдие ссылки эта кнопка будет выглядить так:
<A HREF="#nul" onClick="window.external.addFavorite('http://lenininc.narod.ru/', 'LENIN INC'); return false;"> Добавить в избранное </A>
Измените значение http://lenininc.narod.ru/ на свой адрес, значение LENIN INC на имя вашего сайта.
| Сделать страницу стартовой. Вверх |
Следующий код реализует кнопку, при нажатии на которую страница делаеться стартовой:
<FORM>
<BUTTON TYPE="SUBMIT" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://lenininc.narod.ru/'); return false;"> Сделать стартовой </BUTTON>
</FORM>
В вдие ссылки:
<A HREF="#nul" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://lenininc.narod.ru/'); return false;"> Сделать стартовой </A>
Измените значение http://lenininc.narod.ru/ на свой адрес.
| История посещений (Назад/Вперед). Вверх |
Использование объекта History дает возможность возвращаться на URL, который был посещен перед этим, и переходить на URL, посещенный перед этим. Список посещенных URL содержится в меню go Обозревателя. Делается это, используя методы объекта History: back() и forward().
<FORM>
<INPUT TYPE="button" VALUE=" Назад " ONCLICK="history.back(-1)">
<INPUT TYPE="button" VALUE=" Вперед " ONCLICK="history.forward(1)">
</FORM>
В виде ссылок эти кнопки будут выглядеть так:
<A HREF="javascript:history.back()"> Назад </A>
<A HREF="javascript:history.forward()"> Вперед </A>
Если необходимо вернуться на несколько позиций списка меню, то используется метод go(), в скобках указывается число:
Отрицательноe, напр. (-2) - на сколько шагов вернутся Назад
Положительное, напр, (2) - на сколько шагов вернутся Вперед.
Например, для возврата на три позиции назад указывается go(-3):
<A HREF="javascript:history.go(-3)"> Назад </A>
Если нет посещенных перед этим URL, то это работать не будет.
| Перезагрузка страницы. Вверх |
Данная программа перезагружает текущую страницу.
<FORM>
<input TYPE="button" VALUE=" Перезагрузить " ONCLICK="ReloadButton()">
<script>
function ReloadButton()
{
location.href="Buttons.htm";
}
</script>
</FORM>
Измените документ Buttons.htm на свой.
Нажав такую кнопку, пользователь перейдет по указаной ссылке. В данном случае кнопка работает как обычная гипперссылка.
<FORM>
<input TYPE="button" VALUE=" LENIN INC " ONCLICK="HomeButton()"> <script>
function HomeButton()
{
location.href="http://lenininc.narod.ru/";
}
</script>
</FORM>
Измените URL http://lenininc.narod.ru/ на свой.
При нажатии на такую кнопку будет выведено окно с любым Вашим сообщением.
<FORM>
<input TYPE="button" VALUE=" Сообщение " ONCLICK="AlertButton()">
<script>
function AlertButton()
{
window.alert("Введите здесь текст своего сообщения");
}
</script>
</FORM>
| Сообщение в статусной строке. Вверх |
Когда пользователь нажмет такую кнопку в строке состояния обозревателя будет отображен определенный текст.
<FORM>
<input TYPE="button" VALUE=" Сообщение " ONCLICK="StatusButton()">
<script>
function StatusButton()
{
window.status="Введите здесь текст своего сообщения";
}
</script>
</FORM>
| Изменение фонового цвета страницы. Вверх |
С помощью такой кнопки пользователь сможет изменить фоновый цвет страницы.
<FORM>
<input TYPE="button" VALUE=" Изменить цвет " onClick="BgButton()">
<script>
function BgButton(){
if (document.bgColor=='#adff2f')
{document.bgColor='#ffffff';}
else{document.bgColor='#adff2f';}
}
</script>
</FORM>
Нажав кнопку, цвет фона измениться на салатовый - adff2f, повторное нажатие вернет белый фоновый цвет - #ffffff и т.д. Измените шестнадцатиричное значения цвета #adff2f на нужное Вам (в двух местах) и обязательно наберите его в нижмнем регистре.
| Открытие нового окна. Вверх |
Вы можете кнопкой открывать новые окна, которые могут содержать только определенные Вами элементы управления.
<FORM>
<input TYPE="button" VALUE=" Открыть окно " ONCLICK="NewWindow()">
<script>
function NewWindow()
{
window.open("URL","","Parameter");
}
</script>
</FORM>
URL - URL откpываемого pесypса. Может быть ссылкой на любой понимаемый Обозревателем докyмент (в том числе и на локальной машине).
Parameter - паpаметpы нового окна (в виде текстовой стpоки). Записываются без пробелов чеpез запятyю:
Toolbar=[yes|no|1|0] - Присутствие Панели инструментов
Location=[yes|no|1|0] - Присутствие адреса
Directories=[yes|no|1|0] - Присутствие ссылок
Status=[yes|no|1|0] - Присутствие статустной строки
Menubar=[yes|no|1|0] - Присутствие меню
Scrollbars=[yes|no|1|0] - Присутсвие прокрутки
Resizable=[yes|no|1|0] - Изменение размера окна мышью
Width=[pазмеp в пикселях] - Высота окна
Height=[pазмеp в пикселях] - Ширина окна
Можно использовать значения присутсвия элемента - yes или 1, отсутствие элемента - no или 0. В следующем примере выводится окно размерами 600Х400 пикселей с присутствием всех элементов управления:
<FORM>
<input TYPE="button" VALUE=" Открыть новое окно " ONCLICK="NewWindow()">
<script>
function NewWindow()
{
window.open("URL","","Toolbar=1,Location=1,Directories=1,Status=1, Menubar=1,Scrollbars=1,Resizable=1,Width=600,Height=400");
}
</script>
</FORM>
Посмотрите статью Новые окна. Там приводится HTML cоздатель ссылок для открытия новых окон с определенными параметрами.
| Просмотр в виде HTML. Вверх |
При нажатии на такую кнопку открывается текущий документ в Блокноте пользователя.
<FORM>
<INPUT TYPE="button" NAME="view" VALUE=" Просмотр в виде HTML " OnClick="window.location="view-source:" +window.location.href">
</FORM>
С помощью такой кнопки пользователь может вызвать окно Печать с параметрами настройки печати и произвести распечатку текущей страницы на принтере.
<FORM>
<INPUT NAME="print" TYPE="button" VALUE=" Печать страницы " ONCLICK="varitext()">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function varitext(text){
text=document
print(text)
}
// End -->
</SCRIPT>
</FORM>
С помощью следующей конструкции Вы можете поместить в кнопку любое изображение. Для примера я взял кнопку Добавить в избранное и встроил в нее изображение Favorite.gif.
<FORM>
<BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://lenininc.narod.ru/', 'LENIN INC'); return false;">
<IMG SRC="Favorite.gif" WIDTH=16 HEIGHT=16 ALIGN="ABSMIDDLE" BORDER=0"> Добавить в Избранное </BUTTON>
</FORM>
Вместо Favorite.gif введите имя своего графического файла, укажите его размеры и окантовку (елементы WIDTH, HEIGHT, BORDER соответственно).
Кроме этого, Вы можете изменить размер шрифта в кнопке, воспользовавшись стилями.
<FORM>
<BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://lenininc.narod.ru/', 'LENIN INC'); return false;">
<IMG SRC="Favorite.gif" WIDTH=16 HEIGHT=16 ALIGN="ABSMIDDLE" BORDER=0"><SPAN STYLE="font-size: 8pt"> Добавить в Избранное </SPAN></BUTTON>
</FORM>
Размер шрифта устанавливатся изменением значения атрибута font-size: Измените его, например, на 12pt (pt - проценты).
Добавив еще два элемента в код кнопки можно добиться ее подсвечивания при подведении курсора мыши:
<FORM>
<BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://lenininc.narod.ru/', 'LENIN INC'); return false;" onMouseOver="style.color='blue'" onMouseOut="style.color='black'">
<IMG SRC="Favorite.gif" WIDTH=16 HEIGHT=16 ALIGN="ABSMIDDLE" BORDER=0"><SPAN STYLE="font-size: 8pt"> Добавить в Избранное </SPAN></BUTTON>
</FORM>
Синтаксис:
onMouseOver="style.color='blue'" - цвет текста, когда курсор мыши подводится к кнопке.
onMouseOut="style.color='black'" - цвет текста, когда курсор мыши покидает кнопку.
