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

⇐ Предыдущая 12

Изменение размера изображения

По умолчанию изображение отображается в браузере с сохранением своих исходных размеров и пропорций. При этом, если изображение превышает размер окна браузера, то оно может либо автоматически уменьшится до размера окна, либо предоставить возможность просмотра по частям с использованием полос прокрутки.

При помощи атрибутов height и width (высота и ширина, соответственно) можно задать размеры отображения графического файла на Web-странице.

<html> <body>В первом случае изображение выводится с сохранением своих исходных размеров (253*190 пикселей).<br><img src="photo.png"> <br>Во втором варианте высота изображения уменьшена до 100 пикселей. Обратите внимание, хотя явно задан только атрибут height, браузер автоматически отмасштабировал изображение и по ширине с сохранением исходных пропорций.<br><img src="photo.png" height="100"><br>В третьем варианте принудительно заданы оба атрибута, при этом высота уменьшена до 100 пикселей, а ширина оставлена на прежнем уровне. В этом случае автоматического масштабирования не производится, и изображение сжимается по вертикали. <br><img src="photo.png" height="100" width="253"></body> </html>

Пример выполнения данного HTML-кода

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

</FORM>

Кроме того, когда пользователь кликает по графической кнопке, то на сервер отправятся не только данные, введенные в поля формы, но также и координаты указателя мыши относительно левого верхнего угла изображения. К сожалению, перехватить эти координаты в JavaScript-программе не удается. Если Вам необходимо работать с этими координатами, то вместо графической кнопки рекомендуется создать активную карту с помощью контейнера <MAP>.

Графические кнопки имеют ряд странностей. Например, являясь одновременно и кнопкой, и изображением, они почему-то отсутствуют как в коллекции document.f.elements[], так и в коллекции document.images[]. Как следствие, они не учитываются ни в общем количестве элементов формы (document.f.length), ни в общем количестве изображений документа (document.images.length).

Как же обратиться к такой кнопке? Это можно сделать, например, задав атрибут ID:

и затем в программе написав: var knopka = document.getElementById('d1'). После этого мы можем обращаться к свойствам этой кнопки, например knopka.src, а также к методу knopka.click(). Следующий пример показывает, что вызов метода click() графической кнопки "почти" равносилен нажатию этой кнопки, т.е. последовательно вызывает обработчики onClick кнопки, onSubmit формы и передает данные на сервер (но что при этом передается в качестве координат курсора мыши?):

Пример. Вызов метода 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>

Контрольные вопросы

1. Что отправляется на сервер, когда пользователь кликает по графической кнопке?

2. Присутствуют ли графические кнопки в коллекциях document.f.elements[] и document.images[]?

3. Как обратиться к графической кнопке?

Литература:

Інтернет-университет информационных технологий www.intuit.ru. Курс «Введение в JavaScript»

⇐ Предыдущая 12

Поделиться с друзьями:

Дата добавления: 2015-07-13; Просмотров: 641; Нарушение авторских прав?; Мы поможем в написании вашей работы!

Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет

studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление

Генерация страницы за: 0.009 сек.