Кнопки форматирования
Используемая на этой форме кнопка отправки отличается от используемых обычно кнопок. Она имеет другой размер и цвет и изменяет цвет, когда указатель мыши перемещается над ней.
Начальный вид кнопки задается спецификацией таблицы стилей. Определяется класс таблицы стилей для задания ширины кнопки, выравнивания текста, типа и размера шрифта, цвета фона и цвета текста:
.buttonS { width:35px; text-align:center; font-family:arial; font-size:9pt; background-color:seagreen; color:white; }
Эти настройки применяют, задавая атрибут CLASS, которому присваивается имя этого класса в теге кнопки:
<input type="submit" class="buttonS" name="Submit" value="Go"...>
Изменения в спецификациях стиля оформления происходят, когда указатель мыши перемещается над кнопкой и когда он смещается с кнопки. Эти изменения активируются операторами JavaScript, кодируемыми в теге кнопки:
<input type="submit" class="buttonS" name="Submit" value="Go" onMouseOver="OverMouse(this)" onMouseOut="OutMouse(this)">
События onMouseOver и onMouseOut активируют вызовы функций OverMouse() и OutMouse(), соответственно, передавая ссылку self на объект (эту кнопку), содержащий эти обработчики событий. Эти функции затем получают ссылку на эту кнопку отправки для применения сценария.
Кодирование сценария в функциях имеет две задачи. Первое: сценарии содержат несколько операторов, что делает их неудобными для кодирования внутри отдельных кнопок. Второе: функции можно вызывать из любых кнопок, на которые нужно оказать воздействие. Это означает, что функции должны быть доступны на всех страницах, чтобы можно было применить любую кнопку на этих страницах.
Как было сделано для заголовка и меню, которые присутствуют на всех страницах, код JavaScript для активации кнопок находится во включаемом файле, который можно импортировать на любую страницу. Обычный метод импортирования кода JavaScript состоит во включении его в раздел <HEAD> страницы, чтобы процедуры загружались и были доступны для активации до загрузки раздела <BODY>. Поэтому все страницы сайта eCommerce включают директиву
require(jscript.inc)
в своих разделах <HEAD>. Код файла jscript.inc показан ниже:
jscript.inc <script language="javascript"> function OverMouse(button) { button.style.backgroundColor="lightgreen" button.style.color='darkgreen' button.style.cursor='hand' } function OutMouse(button) { button.style.backgroundColor="seagreen" button.style.color='white' } </script>
Вспомните, что обе функции получают ссылку на нажатую кнопку. Эта ссылка будет получена как переменная button, поэтому любая ссылка на button (кнопка) является ссылкой на реальную кнопку, которая в данный момент находится под курсором мыши или с которой курсор мыши был только что смещен. Две функции просто задают различные стили для кнопки в зависимости от того, какое действие совершил пользователь.
