Кнопки
-= сам сделай сайт! =-

ЭТО НЕ ТАК УЖ И СЛОЖНО...

- Основы языка HTML -

  • С чего начинать?
  • Текст.
  • Цвет и фон.
  • Изображения.
  • Изображения-карты.
  • Ссылки.
  • Стили (CSS).
  • Мета-теги.
  • Таблицы.
  • Списки.
  • Формы.
  • E-mail формa.
  • Горизонтальные линии.

    - Дополнительные сведения -

  • Список елементов HTML.
  • Раскладка цветовой гаммы по RGB-составляющим.
  • Спецсимволы в HTML.
  • Курсоры.
  • Фильтры, применяемые к тексту.
  • Фильтры, применяемые к изображению.
  • Дополнительные возможности тега <BODY>

    - Полезное -

  • Новые окна. (
  • Полезные советы Web-мастеру.

    - Java Scripts -

  • JavaScript.
  • События.
  • Окна с сообщениями.
  • Кнопки.
  • Простые вредоносные JavaScripts.
      • Кнопки.

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


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

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

      <FORM>
      <BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://samsdelaysayt.narod.ru/', 'LyadoFF INC'); return false;">       Добавить в избранное </BUTTON>
      </FORM>

      В вдие ссылки эта кнопка будет выглядить так:

      <A HREF="#nul" onClick="window.external.addFavorite('http://samsdelaysayt.narod.ru/', 'LyadoFF INC'); return false;"> Добавить в избранное </A>

      Измените значение http://samsdelaysayt.narod.ru/ на свой адрес, значение LyadoFF INC на имя вашего сайта.


      Сделать страницу стартовой. Вверх

      Следующий код реализует кнопку, при нажатии на которую страница делаеться стартовой:

      <FORM>
      <BUTTON TYPE="SUBMIT" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://samsdelaysayt.narod.ru/'); return false;">       Сделать стартовой </BUTTON>
      </FORM>

      В вдие ссылки:

      <A HREF="#nul" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://samsdelaysayt.narod.ru/'); return false;"> Сделать стартовой </A>

      Измените значение http://samsdelaysayt.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="       LyadoFF INC " ONCLICK="HomeButton()"> <script>
      function HomeButton()
      {
      location.href="      http://samsdelaysayt.narod.ru/";
      }
      </script>
      </FORM>

      Измените URL http://samsdelaysayt.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://samsdelaysayt.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://samsdelaysayt.narod.ru/', 'LyadoFF 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'" - цвет текста, когда курсор мыши покидает кнопку.

    Вернуться?
    Hosted by uCoz
    Copyright ©2009 Валентин Иткинд
    -= END =-
    Оптом: продажа растений Поставки в Москву и регионы!.