Графическая кнопка

Графическая кнопка - это разновидность кнопки отправки. Ее отличие в том, что вместо кнопки с надписью пользователь увидит картинку, по которой можно кликнуть:

<FORM ACTION="receive.htm">

<INPUT TYPE=image SRC="pic.gif">

</FORM>

Кроме того, когда пользователь кликает по графической кнопке, то на сервер отправятся не только данные, введенные в поля формы, но также и координаты указателя мыши относительно левого верхнего угла изображения. К сожалению, перехватить эти координаты в 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 формы и передает данные на сервер (но что при этом передается в качестве координат курсора мыши?):

Пример 3. Вызов метода click() у графической кнопки

<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>