Значение image
Тип image (от англ. «image» ‒ «изображение») создаёт графическую кнопку отправки данных формы либо карту изображения.
Внешний вид
- ‒ пример внешнего вида графической кнопки отправки;
‒ фокус;
‒ наведение курсора;
‒ активация.
Примечание
С помощью атрибута « name » из графической кнопки можно сделать «серверную карту-изображения».
Поддержка браузерами
Спецификация
| Верс. | Раздел | |
|---|---|---|
| HTML | ||
| 2.0 | Image Pixel: INPUT TYPE=IMAGE | Перевод |
| 3.2 | INPUT text fields, radio buttons, check boxes, . | |
| 4.01 | 17.4.1 Control types created with INPUT DTD: Transitional Strict Frameset |
|
| 5.0 | 4.10.5.1.16 Image Button state (type=image) | |
| 5.1 | 4.10.5.1.19. Image Button state (type=image) | |
| XHTML | ||
| 1.0 | Extensible HyperText Markup Language DTD: Transitional Strict Frameset |
|
| 1.1 | Extensible HyperText Markup Language | |
Сопутствующие атрибуты
align Устанавливает выравнивание графической кнопки. alt Указывает альтернативный текст, описывающий изображение (кнопку).
Примечание: Альтернативный текст предназначен для не графических web-браузеров. Данный текст так же может быть использован графическими браузерами в случаях, когда web-браузер не может найти указанное изображение.
src=»» alt=»Альтернативный текст»
autofocus Автоматческая фокусировка на графической кнопке после полной загрузки страницы. disabled Блокировка графической кнопки.
disabled=»disabled»
form Присоединение графической кнопки к форме. formaction Задаёт URL-адреса обработчика формы. formenctype Устанавливает способ кодирования данных отправляемых на сервер. formmethod Определяет HTTP-метод передачи данных на сервер. formnovalidate Отменяет проверку данных формы перед отправкой на сервер. formtarget Указывает фрейм или окно в которое будет загружен ответ сервера. height Задаёт высоту графической кнопки. name Присваивает имя графической кнопке.
Примечание: Если графическая кнопка имеет атрибут « name », то она может выступать в качестве серверной карты-изображения. При нажатии на такую кнопку, будет сгененрирована пара значений, отправляемая на сервер (совместно с данными формы):
- « .x= » ‒ значение координаты « X », которое рассчитывается в пикселях от левой границы графической кнопки до места нажатия;
- « .y= » ‒ значение координаты « Y », которое рассчитывается в пикселях от верхней границы графической кнопки до места нажатия.
coord">
при нажатии на данную кнопку в координатах « x=15;y=24 », будут сгенерированы следующие значения (при GET-методе передачи данных): « /handler.php? coord.x=15&coord.y=24 ».
src Указывает URL-адрес изображения. value Указывает значение графической кнопки.
Примечание: Атрибут « value » должен быть опущен.
Как сделать кнопку с картинкой в html
Для создания кнопки с картинкой в HTML можно использовать тег и атрибут background-image в CSS. Вот пример кода:
class="image-button"> .image-button width: 100px; height: 50px; border: none; background-image: url('path/to/image.jpg'); background-size: cover; > В данном примере мы создаем кнопку с классом «image-button». Задаем ей ширину и высоту, убираем границу и задаем фоновую картинку с помощью атрибута background-image . Картинка будет растянута на всю площадь кнопки благодаря свойству background-size: cover; .
Также можно добавить эффекты при наведении или клике на кнопку с помощью псевдоклассов :hover и :active:
.image-button:hover opacity: 0.8; > .image-button:active transform: scale(0.95); > В данном примере при наведении на кнопку уменьшается прозрачность до 80% с помощью свойства opacity , а при клике на кнопку она уменьшается на 5% с помощью свойства transform: scale(0.95) .
Как сделать — Кнопку на изображении
Узнайте, как добавить кнопку к изображению с помощью CSS.
Кнопка на изображении
Создать кнопку на изображении
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
/* Контейнер, необходимый для размещения кнопки. Отрегулируйте ширину по мере необходимости */
.container position: relative;
width: 50%;
>
/* Сделайте изображение отзывчивым */
.container img width: 100%;
height: auto;
>
/* Стиль кнопки и поместите его в середине контейнера/изображения */
.container .btn position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
>
.container .btn:hover background-color: black;
>
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
Как вставить картинку в кнопку
Если у Вас кнопка создана тегом , то есть отдельная статья «Как сделать input картинкой».
А в этой статье описано, как вставить картинку в button.
Чтобы вставить картинку в button, нужно поместить изображение внутрь . Есть еще вариант — воспользоваться CSS, но об этом ниже. Пример кода для добавления картинки в button в HTML:
При этом, по умолчанию, при наведении курсора на button в браузере курсор не меняет вид. Такое поведение обычно изменяют. Смотрите «Как изменить курсор при наведении на кнопку».
Добавление изображения просто с помощью тега это самый быстрый способ. Он работает безошибочно, но в настоящее время он не совсем правильный, особенно с точки зрения семантики. Как добавлять изображения на сайт правильно, читайте здесь «Как правильно вставить картинку в HTML».
Теперь о том, если Вам нужно добавить картинку в кнопку фоном, то есть через CSS. Обычно это делается через CSS-файл, но если Вы не знаете, что это, то можно прямо в HTML так:
Скопируйте: style=»background-image: url(image.png);».
CSS-свойство background-image добавляет изображение фоном. В url нужно указать путь до картинки.
Чтобы картинка не повторялась смотрите «Как сделать чтобы картинка не повторялась».
Чтобы задать размер картинки смотрите «Как изменить размер картинки».
Чтобы задать позицию изображения смотрите «Background-position в CSS — что это».
Добавить комментарий Отменить ответ
Этот сайт, как и все сайты, использует cookie. Продолжая использовать этот сайт, Вы даете свое согласие на обработку cookie.OK
Manage consent
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
| Cookie | Duration | Description |
|---|---|---|
| cookielawinfo-checkbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Analytics». |
| cookielawinfo-checkbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category «Functional». |
| cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category «Necessary». |
| cookielawinfo-checkbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Other. |
| cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Performance». |
| viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.