Идёт загрузка страницы...

htp://aptem.net.ru





    Кнопки.

  • Добавить в Избранное.
  • Сделать страницу стартовой.
  • История посещений (Назад/Вперед).
  • Перезагрузка страницы.
  • Кнопка-ссылка.
  • Сообщение в окне.
  • Сообщение в статусной строке.
  • Изменение фонового цвета страницы.
  • Открытие нового окна.
  • Просмотр в виде HTML.
  • Печать страницы.
  • Украшательства. (изображение в кнопке, изменение шрифта текста кнопки, подсвечивание).


    Добавить в Избранное. Вверх

    На своей странице Вы можете установить кнопку, при нажатии на которую пользователь добавлял бы ее в Избранное:

    <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'" - цвет текста, когда курсор мыши покидает кнопку.


Вернуться?

Перейти к разделу "Учебники по HTML"