Java Script Кнопки в  веб-дизайне при создание сайта

           главная страница сайта              Главная                                     обмен ссылками с тематическими сайтами                 Обмен ссылками                                        гостевая книга             Гостевая                                     обратная связь для отправки почты на e-mail              Обратная связь             |

Webmaster-Soft.ru - программы, скрипты для вебмастера            Меню

 

Книги для веб-мастера, книги програмирования  Программы
Электронные книги  Книги
Журналы для вебмастеров   Журналы вебмастеру
  Скрипты
Статьи
Учебник HTML  Учебник HTML
Базы каталогов для раскрутки сайта  Базы каталогов
Шаблоны, картинки, смайлы, иконки  Архив программ
   Интернет магазин
  Каталог статей
  Доска обьявлений
 

 

 

 

 

Работа в сети интернет
Лучшие системы в сети
для заработка

 

 
 

 


 

 

 

В помощь Web-Дизайнеру

JavaScript Кнопки в веб-дизайне при создание сайта

  Статьи
  Учебник по Веб-Дизайну




 

Кнопки

(java script)


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


     

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

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

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

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

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

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


     

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

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

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

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

    <A HREF="#nul" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage(''); 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="
    ";
    }
    </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>0

    <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('', '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('', '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 - проценты).

    Добавив еще два элемента в код кнопки можно добиться ее подсвечивания при подведении курсора мыши: :

    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"> Добавить в Избранное </FORM>

    Синтаксис:
    onMouseOver="style.color='blue'" - цвет текста, когда курсор мыши подводится к кнопке.
    onMouseOut="style.color='black'" - цвет текста, когда курсор мыши покидает кнопку.








Страницы < 19 20 21 22 23 23 24 >

 

<<<В начало>>>

 


 





 

Ramblers.ru

Rambler's Top100

 

    

  

 
   Доска бесплатных обьявлений - Inet-Doski
  

 

Inet-Bazar.ru
 Интернет магазин цифрового товара.

--==--