Создание картинок

Создание картинок

С помощью картинок можно украсить форму. Их можно использовать в качестве кнопок. Для задания кнопки-картинки указываем type="image". При этом необходимо задать атрибут src. Его значение – адрес картинки на сервере.

Получается очень симпатичный вид формы, но надо следить за размером картинки, чтобы графические кнопки не оказались больше самой формы.

Для полей картинок можно использовать атрибут alt, который задает альтернативный текст, всплывающий при наведении указателя мыши на изображение. Обязательно используйте этот атрибут, потому что, если у посетителя отключена загрузка картинок, это будет единственная возможность сообщить ему, куда надо нажать для отправки формы.

Можно задать положение картинки на странице относительно текста с помощью атрибута align. Множество значений этого атрибута позволит вам выровнять изображение как угодно.

Значения атрибута align:

• left – по левому краю;

• right – по правому краю;

• top – выравнивание верхней границы картинки по самому высокому элементу строки;

• texttop – выравнивание верхней границы картинки по самому высокому элементу текста;

• middle – середина изображения выравнивается по базовой линии строки;

• absmiddle – середина изображения выравнивается по середине строки;

• baseline – выравнивание нижней границы изображения по базовой линии строки;

• bottom – выравнивание нижней границы изображения по окружающему тексту.

В листинге 6.13 представлен пример создания кнопок-картинок, которые предварительно нарисованы в графическом редакторе. Для них задано выравнивание и альтернативный текст.

Листинг 6.13. Создание графических кнопок

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data" method="post" name= "test" target="_blank">

<input name="submit" type="image" src="Send.jpg" alt="Нажмите, чтобы отправить" align="left" border="5" /><input name="reset" type="image" src= "Clear.jpg" alt="Нажмите для очистки формы" align="right" />

</form>

</body>

</html>

Результат обработки браузером кода из листинга 6.13 показан на рис. 6.7.

Рис. 6.7. Графические кнопки

Нарисованные кнопки оживят вид вашей формы.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

Поиск картинок

Из книги Блог. Создать и раскрутить автора Ющук Евгений Владимирович

Поиск картинок Самый простой способ поиска картинок – обратиться к специализированным разделам Яндекса, Гугла или других поисковых машин. Переход в раздел «Картинки» находится выше поисковой строки (в Гугле) или ниже ее (в Яндексе). Перейдите в раздел «Картинки» и ищите.


Бесплатные архивы мелодий, картинок, игр

Из книги Компьютер + мобильник: эффективное взаимодействие автора Гольцман Виктор Иосифович

Бесплатные архивы мелодий, картинок, игр В этом разделе рассмотрим несколько сайтов, с которых вы сможете скачать кое-что совершенно


Глава 6 СОЗДАНИЕ КАРТИНОК, АНИМАЦИИ И ИГР

Из книги Компьютер на 100. Начинаем с Windows Vista автора Зозуля Юрий

Глава 6 СОЗДАНИЕ КАРТИНОК, АНИМАЦИИ И ИГР Где искать мелодии и как их создавать самостоятельно, вы уже знаете. Эта глава будет посвящена картинкам, анимациям и играм для мобильных телефонов. Прочитав эту главу, вы научитесь самостоятельно создавать анимированные картинки


Принципы создания картинок для сотовых телефонов

Из книги Создание электронных книг в формате FictionBook 2.1: практическое руководство [Release 1.01 от 28.II.2010 г.] автора Кондратович Михаил Иосифович

Принципы создания картинок для сотовых телефонов Сегодня картинки стали неотъемлемой частью мобильного телефона. Еще во времена черно-белых экранов было популярно устанавливать различные изображения, а когда экраны стали цветными, причем приобрели довольно высокое


Вставка картинок

Из книги Самоучитель работы на компьютере автора Колисниченко Денис Николаевич

Вставка картинок В состав пакета Microsoft Office входит подборка картинок на разные темы. Чтобы использовать их для оформления документа, действуйте следующим образом.1. Нажмите кнопку Вставка ? Иллюстрации ? Клип. После этого в правой части окна Word появится область задач Клип.2.


§ 5.2 Подготовка картинок

Из книги Тест PNG с прозрачностью автора Тигра Рыжий

§ 5.2 Подготовка картинок Перед тем, как добавить в книгу картинки, следует хорошенько подумать.Дело в том, что картинки очень сильно «утяжеляют» файл. Дополнительные килобайты объема складываются в мегабайты, мегабайты в гигабайты. Траффика. А траффик стоит денег. Если


13.7. Вставка картинок

Из книги Как заработать в Интернете: Практическое пособие автора Дорохова Марта Александровна

13.7. Вставка картинок Для вставки картинок используется команда меню Вставка, Рисунок. Затем вы можете выбрать одну из команд:Картинки — позволяет выбрать картинку из галереи MS Office. Исследуйте эту галерею, в ней вы найдете много интересных рисунков, которые можно


Описание тестовых картинок

Из книги Ководство автора Лебедев Артём Андреевич

Описание тестовых картинок Каждая чётная картинка состоит из следующих строк (числа в центре клеток показывают значения в шестнадцатиричном виде: первая пара цифр — яркость, вторая — значение в альфа-канале):1) от чёрного (00) до серого (80) — непрозрачный (FF);2) чёрный


§ 69. Разрешение картинок

Из книги FictionBook Editor V 2.66 Руководство автора Izekbis

§ 69. Разрешение картинок 16 июня 2001Попробуем разобраться в одном из самых больших заблуждений человечества за всю историю существования экранной графики.Дело в том, что у электронного изображения вообще нет разрешения. Разрешение (точнее, разрешающая способность) может


1.6. Поиск картинок

Из книги Как приручить компьютер за несколько часов автора Ремнева Ирина

1.6. Поиск картинок Поиск картинок на Яндексе появился существенно позже поиска документов, хотя веб-страницы — это не только тексты, но и изображения, фотографии, рисунки, отсканированные копии тех же документов. Они интересуют пользователей в не меньшей степени, поэтому


Сохранение картинок с сайта

Из книги автора

Сохранение картинок с сайта Вам понравился на сайте какой-нибудь рисунок и вы его хотите «прикарманить»? Нет ничего проще. Щелчком правой кнопки мыши на этом рисунке вы вызываете контекстное меню, а в нем выбираете пункт Сохранить рисунок как… Сохранение рисунка в