Графическая кнопка - это разновидность кнопки отправки. Ее отличие в том, что вместо кнопки с надписью пользователь увидит картинку, по которой можно кликнуть:
Кроме того, когда пользователь кликает по графической кнопке, то на сервер отправятся не только данные, введенные в поля формы, но также и координаты указателя мыши относительно левого верхнего угла изображения. К сожалению, перехватить эти координаты в JavaScript-программе не удается. Если Вам необходимо работать с этими координатами, то вместо графической кнопки рекомендуется создать активную карту с помощью контейнера <MAP>.
Графические кнопки имеют ряд странностей. Например, являясь одновременно и кнопкой, и изображением, они почему-то отсутствуют как в коллекцииdocument.f.elements[], так и в коллекции document.images[] (IE 7, Mozilla Firefox). Как следствие, они не учитываются ни в общем количестве элементов формы ( document.f.length ), ни в общем количестве изображений документа (document.images.length ).
Как же обратиться к такой кнопке? Это можно сделать, например, задав атрибутID:
<INPUT TYPE=image SRC="pic.gif" ID="d1">
и затем в программе написав: var knopka = document.getElementById('d1'). После этого мы можем обращаться к свойствам этой кнопки, напримерknopka.src, а также к методу knopka.click(). Следующий пример показывает, что вызов метода click() графической кнопки "почти" равносилен нажатию этой кнопки, т.е. последовательно вызывает обработчики onClick кнопки, onSubmitформы и передает данные на сервер (но что при этом передается в качестве координат курсора мыши?):
<FORM ACTION="receive.htm" onSubmit="return confirm('Вы хотите отправить данные?')"><INPUT onClick="alert('Вызван обработчик onClick у графической кнопки')" TYPE="image" SRC="pic.gif" id="d1"></FORM> <A HREF="javascript: var knopka = document.getElementById('d1'); knopka.click(); void(0);" >Вызвать метод <B>click()</B> графической кнопки</A>
Пример 5.13. Вызов метода click() у графической кнопки (html, txt)
Поскольку графические кнопки используются довольно редко, на этом мы остановимся в их обсуждении.
Для начала нам нужно разделить несколько понятий: применимость URL в атрибутах HTML-контейнеров; коллекция гипертекстовых ссылок; объекты классаURL.
Адреса URL могут использоваться в атрибутах многих HTML-контейнеров, например:
ссылки (URL в атрибуте HREF контейнера<A> );
активные области (URL в атрибуте HREFконтейнера <AREA> );
картинки (URL в атрибуте SRCконтейнера <IMG> );
формы (URL в атрибуте ACTION контейнера <FORM> );
внешние скрипты (URL в атрибуте SRC контейнера <SCRIPT> );
связанные документы (URL в атрибуте HREF контейнера <LINK> ).
Гипертекстовая ссылка в HTML-документе - это область HTML-страницы, по которой можно "кликнуть" (или выбрать ее иным способом), чтобы перейти к просмотру другого HTML-документа. Из всех перечисленных выше вариантов применения URL гипертекстовыми ссылками являются лишь первые два. В объектной модели документа (DOM) они собраны в единую коллекциюгипертекстовых ссылок document.links[]. Нумерация в ней начинается с нуля (как обычно), в порядке появления ссылок в документе.
Обратите внимание, что в принципе могут существовать ссылки, по которым невозможно "кликнуть", т.к. они занимают нулевую площадь web-страницы; например, контейнер <A> с пустым содержимым, т.е. <A HREF="http://ya.ru/"></A>, или контейнер <AREA>, ограничивающий фигуру нулевой площади. Тем не менее все они считаются гипертекстовыми ссылками и содержатся в коллекцииdocument.links[]. С другой стороны, в коллекцию document.links[] не попадаютякоря, то есть контейнеры <A>, не имеющие атрибута HREF (якоря нужны, чтобы задать место, на которое можно сослаться из другой гиперссылки). Все контейнеры <A> (как якоря, так и гиперссылки) собраны в коллекцииdocument.anchors[] ; в этой лекции, однако, она нас не будет интересовать.
В объектной модели документа DOM объекты класса URL имеют такие свойства, как href, protocol, hostname и т.д. (полный перечень см. ниже). В класс URLвходят объекты коллекции document.links[], а также объект window.location, рассматривавшийся в лекции 4. Конечно, помимо общих свойств, перечисленных ниже, эти объекты могут иметь свои специфичные только для них свойства, методы и события. Например, у объекта window.location есть метод reload(), тогда как у ссылок его нет, но у них есть обработчик события onClick. Мы начнем с рассмотрения объектов класса URL.
