Как сделать чтобы при нажатии на кнопку появлялась картинка html

Add image to page onclick

I want a button to add an image to the current page on each click. For example, the first time you open the page, there is one picture. Then you click the button and the same picture appears on the page and now you have two same pictures. Then you keep on pressing on the button and more and more same pictures appear. This is the code I tried that didn’t work:

Please help! Thanks.

2 Answers 2

You should probably know that javascript can create html elements, but you cannot directly embed html inside javascript (they are two completely separate things with different grammars and keywords). So it’s not valid to have a function that only contains html — you need to create the elements you want, and then append them to the dom elements that you want them to. In this case, you create a new image and then append it to the body.

Курсы javascript

Доброго времени суток. Я самый самый новичок в области разработки. Учусь самостоятельно и буду рад помощи профессионалов.
Суть проблемы такая, есть код html:

Собственно что я пытаюсь реализовать. Чтоб при клике на кнопку выезжала картинка. Далее при клике на картинку, она бы становилась постепенно прозрачной до 100% и лишь после этого ее ширина и высота сбрасывались в 0. Ну и чтоб при повторном нажатии на кнопку вновь появлялась картинка. Помогите советом, кому несложно. всем добра=)

<button>¶

Тег <button> (от англ. button — кнопка) создаёт на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью <input> (с атрибутом type=»button | reset | submit» ).

В отличие от этого элемента, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путём изменения шрифта, цвета фона, размеров и других параметров.

• button

Синтаксис¶

Закрывающий тег обязателен.

Атрибуты¶

Также для этого тега доступны универсальные атрибуты.

autofocus¶

Атрибут autofocus устанавливает, что кнопка получает фокус после загрузки страницы. Такую кнопку можно нажать сразу без перевода на неё фокуса, например, с помощью клавиатуры.

Синтаксис

Значения

Значение по умолчанию

По умолчанию это значение выключено.

disabled¶

Блокирует доступ к кнопке и её изменение. Она в таком случае отображается серым цветом и недоступна для активации пользователем. Кроме того, такая кнопка не может получить фокус путём нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передаётся на сервер.

Синтаксис

Значения

Значение по умолчанию

По умолчанию это значение выключено.

Связывает кнопку с формой по её идентификатору. Такая связь необходима в случае, когда кнопка не располагается внутри элемента <form> , например, при создании её программно.

Синтаксис

Значения

Идентификатор формы (значение атрибута id элемента <form> ).

Значение по умолчанию

formaction¶

Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента <form> . Если одновременно указать action и formaction , то при нажатии на кнопку атрибут action игнорируется и данные пересылаются по адресу, указанному в formaction .

Синтаксис

Значения

formenctype¶

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла ( input type=»file» ). Этот атрибут по своему действию аналогичен атрибуту enctype элемента <form> .

Синтаксис

Значения

application/x-www-form-urlencoded Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя). multipart/form-data Данные не кодируются. Это значение применяется при отправке файлов. text/plain Пробелы заменяются знаком + , буквы и другие символы не кодируются.

Значение по умолчанию

• application/x-www-form-urlencoded

formmethod¶

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

Синтаксис

Значения

Различают два метода — GET и POST.

GET Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ & ). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб. POST Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

formnovalidate¶

Отменяет встроенную проверку данных введённых пользователем в форме на корректность при нажатии на кнопку. Такая проверка делается браузером автоматически при отправке формы на сервер для полей <input type=»email»> , <input type=»url»> , а также при наличии атрибута pattern или required у элемента <input> .

Синтаксис

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

formtarget¶

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

Синтаксис

Значения

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

_blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .

Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.

Синтаксис

Значения

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

Значение по умолчанию

Определяет тип кнопки, который устанавливает её поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.

Синтаксис

Значения

button Обычная кнопка. reset Кнопка для очистки введённых данных формы и возвращения значений в первоначальное состояние. submit Кнопка для отправки данных формы на сервер. menu Открывает меню, созданное с помощью элемента <menu> .

Значение по умолчанию

• submit

value¶

Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара « имя=значение », где имя задаётся атрибутом name элемента <button> , а значение — атрибутом value . Значение может как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через скрипты.

Как вставить картинку в HTML-код веб-страницы + настройки атрибутов тега «img»; стилизация графики с помощью CSS: выравнивание, отступы, изображение фоном, ссылкой или в кнопках, а также эффекты при наведении

Сегодня рассмотрим, как основной способ добавления графики на HTML-страницу — соответственно, непосредственно с помощью тега «img», так и другие дополнительные способы, которые могут понадобиться в различных ситуациях при разработке интернет-страниц.

Разберём всевозможные настройки и особенности, которые можно применить к графике: указание размера (ширина, высота), выравнивания, отступы, различные эффекты при наведении мышью на картинку и прочее.

Подготовим простой шаблон HTML-страницы для вставки в неё графики

Для наглядности сначала создадим каркас HTML-страницы с неким текстом (код. 1), а затем вставим в неё картинку, после чего уже разберём все параметры и настройки, которые, в основном, используются и могут быть полезны:

Код 1. Базовый каркас HTML-страницы

Информацию далее рассмотрим в виде урока, чтобы поочерёдно раскрыть тему детальнее.

Перед началом выполните следующие подготовительные шаги:

1. Создайте, например, на рабочем столе, любую папку, в которой будем работать. Назовём её dobavlenie-kartinki (скачать готовый результат со всеми исходниками можно в конце статьи) .
2. В подготовленной папке создайте файл index.html (справка начинающим ниже) , в который поместите предоставленный в блоке «Код 1»HTML-каркас — это будет наша очень простая web-страница, в текст которой будем вставлять картинки и производить с ними различные настройки.
3. Для наглядности, чтобы страница имела небольшой логотип, поместите в эту папку файл с названием logo.png (например, этот) (его подгрузка на страницу уже прописана в предоставленном коде).

Итого, мы имеем папку и в ней 2 файла:

Рис. 1. Рабочая папка с файлами

Справка начинающим. Для создания и редактирования HTML-файлов, когда не требуется объёмного редактирования, удобно использовать любой простой редактор текстовых ( .txt ) файлов — тот же «Блокнот» или чуть более продвинутые ( например, при подготовке статьи я использую «Notepad++»).

Для создания нашего index.html откройте новый файл в блокноте (или Нотепаде) , вставьте в него указанный выше HTML-код и сохраните файл с расширением .html .

Добавление на страницу картинки (используем тег <img> )

Подготовьте и поместите в ранее созданную папку файл картинки. Для примера, пусть это будет изображение окна браузера — brauzer.jpg (скачать), которое поместите в нашу обозначенную папку:

Рис. 2. Файл «brauzer.jpg»

Откроем созданный index.html и найдём в нём следующее:

Код 2. Место для вставки картинки

И рядом (или вместо этого кода) добавим HTML подготовленной картинки:

Код 3. Код картинки — тег <img>

Должно получиться следующее:

Рис. 3. Тег картинки в коде index.html

То есть код 3 — это необходимый HTML, который нужно разместить на web-странице, чтобы вместо него отобразилась картинка.

Для настройки <img> в основном используют следующие атрибуты:

src — атрибут для указания адреса изображения. Это может быть, как относительный адрес (относительно папки (раздела на сайте)) (как в нашем примере — src=»https://nikmurashkin.ru/kodding/vyorstka/brauzer.jpg» ), так и абсолютный адрес вашего сайта или любого другого ресурса ( например, src=»https://nikmurashkin.ru/sites/default/files/inline-images/brauzer.jpg» )

width и height — ширина и, соответственно, высота картинки в пикселях. В данном случае я указал оригинальные размеры изображения, но можно указать и меньшие или бо́льшие.

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

Обычно разработчики задают оригинальные размеры, а далее, при необходимости, меняют картинки как угодно с помощью каскадных стилей CSS (стилизацию рассмотрим чуть позже по тексту) .

alt — альтернативное название. Оно отображается вместо картинки, если у пользователя отключен показ графики на страницах, а также воспроизводится многими интернет- читалками (скринридерами).

Кроме того, данный атрибут считывают поисковые системы, чтобы точнее распознавать изображения.

После того как добавили HTML-код изображения (не забыв положить в папку саму картинку), давайте откроем наш файл «index.html» и посмотрим, что получилось :

Рис. 4. Результат вставки изображения (пока без стилизации)

Как видно на рис. 4, картинка на страницу добавлена, но выглядит не очень красиво. В следующем разделе статьи далее подключим файл стилей CSS, подравняем страницу в целом, а после этого уже будем применять настройки и различные эффекты к самой картинке.

Стилизация изображения с помощью CSS

Итак, наша HTML-страница с пару абзацами текста и картинкой между ними готова. Давайте для наглядности выровняем её с помощью CSS-стилей. Для этого подключим к странице файл «style.css», в который будем задавать все необходимые стилевые настройки.

Предварительно, конечно же, перед тем как подключать стилевый файл, его нужно создать и поместить в нашу папку: откройте текстовый редактор, создайте новый пустой файл и сохраните его, как style.css .

Должно получиться следующее:

Рис. 5. Добавлен файл «style.css»

Найдите в коде index.html следующую строку:

Код 4. Место для подключения CSS-файла стилей

И вставьте в это место следующее (тем самым подключив созданный style.css ) :

Код 5. Тег <link> , подключающий файл стилей

Результат будет следующим:

Рис. 6. Результат подключения файла «style.css»

Теперь обратите внимание на ранее добавленный в index.html код — там у некоторых элементов (тегов) заданы такие атрибуты, как классы: class=»header», , и другие. Обращаясь к этим классам, проведём стилевые настройки для выравнивания элементов на странице. Для этого добавьте в файл style.css следующий код:

Код 6. CSS-код для основной настройки веб-страницы

После добавления в CSS-файл кода 6, страница выровнена, но изображение слишком велико и «выталкивает» вправо боковую колонку. Давайте это поправим, тем самым уже перейдём непосредственно к настройкам картинки. Допишите в стилевый файл следующее:

Код 7. Настройка для вмещения картинки в свой контейнер

Наконец, мы получили выровненную web-страницу (рис. 6), а далее научимся применять к изображениям разные настройки и эффекты: разберёмся с заданием размеров, выравниванием и отступами; расположим картинку, как фон; сделаем ссылкой; вставим в кнопки (в том числе и иконкой) и прочее.

Рис. 7. Выровненная HTML-страница

Изменение размеров картинки

Выше мы рассмотрели атрибуты тега <img> , которыми можно указать отображаемый размер картинки — это width и height , но для оформления изображений (как и любых других HTML-элементов) гораздо удобнее использовать CSS-стили ( например, в 1-ом месте в стилевом файле можно изменить размеры всей графики или картинок определённого класса, когда как атрибуты тега пришлось бы менять у каждого необходимого изображения).

Для указания и изменения размеров в CSS используются свойства, которые также называются width (ширина) и height (высота элемента).

Давайте добавим в наш файл «style.css» следующий код:

Код 8. Настройка ширины и высоты изображения

После чего картинка на странице приняла заданные размеры:

Рис. 8. Изображение приняло уменьшенный вид

Обратите внимание, что в коде 8 я указал перед <img> класс .article , чтобы изменения применялись только к графике, расположенной в элементе с соответствующим классом (в нашем случая — это в статье). Если бы я не сделал это ограничение, то данные размеры приняли бы все картинки (в том числе и логотип на странице).

Какими бы мы не указали width и height непосредственно в атрибутах <img> в коде страницы, аналогичные значения, заданные в CSS, имеют больший приоритет и перекроют атрибуты.

Выравнивание изображения, отступы

Зададим изображению отступы свойством margin , а также укажем, к какому краю должна прижиматься картинка при обтекании её текстом. Для этого в стилевый файл добавьте следующее :

Код 9. CSS-код для выравнивания картинки по левому краю

Добавим в файл index.html ещё несколько абзацев текста и вторую картинку ( предварительно скачайте её и поместите в нашу рабочую папку) между ними (код 10), которую после этого по аналогии выравняем по правому краю с обтеканием текста слева.

Код 10. Несколько абзацев и вторая картинка в index.html

Добавленный код будет выглядеть так:

Рис. 9. Второе изображение в коде веб-страницы

В файл style.css добавьте:

Код 11. Стили для картинки из кода 10

А визуально результат будет следующим:

Рис. 10. Картинка выровнена по правому краю, а текст обтекает слева

Обратите внимание! В коде 10 к тегу картинки я добавил class=»img-two» , чтобы привязать стили конкретно к изображениям указанного класса (в данном случае — это всего одно изображение).

Кроме того, поскольку ко всем <img> , являющимися потомками класса .article я уже указал отступы ( margin: 3px 20px 16px 0; ), то поскольку второе изображение (с классом .img-two ) также относится к <img> внутри .article , верхний и нижний отступы я не стал указывать отдельно, а переопределил лишь левый ( margin-left: 20px; ) и правый ( margin-right: 0; ).

Наконец, давайте выровняем изображение по центру. Для этого скачайте 3-ю картинку, поместите её в рабочую папку и добавьте в index.html следующий код (дополнительный абзац текста + изображение с классом .img-three ) (код 12) (например, в этом (рис. 11) месте):

Код 12. Код для добавления на страницу 3-го изображения Рис. 11. Код третьей картинки и дополнительный абзац текста в index.html

Укажем необходимый CSS для только что добавленного изображения:

Код 13. Стилизация 3-го изображения

Теперь же получим выровненное по центру изображение:

Рис. 12. Картинка выровнена по центру

Посмотрите на код 13. Теперь мы сделали изображение блочным, чтобы как блоку придать ему центральное положение.

Можно было сделать иначе — оставить картинку строчной, а у родителя в HTML-коде (в нашем примере это элемент с классом .article ) задать выравнивание по центру CSS-свойством text-align: center; . Но поскольку в .article находятся и другие элементы (текст страницы, например) , которые также были бы выровнены по центру (а нам это не нужно) , я сделал изображение блочным и расположил его по центру заданием автоматически подбираемыми левым ( margin-left: auto; ) и правым ( margin-right: auto; ) отступами.

Также обратите внимание, что нам в любом случае понадобится отключить обтекание картинки, что и было сделано свойством float: none; .

Изображение, как фон (свойство background-image )

Для вставки картинки фоном нужному элементу необходимо задать CSS-свойство background-image , в котором указать адрес изображения (или относительный, или абсолютный (полный путь на сайте до картинки)).

Давайте сначала зададим фон для всей страницы (для тега <body> ), добавив в style.css следующий код ( предварительно скачайте и поместите в рабочую папку картинку, которая будет фоном):

Код 14. CSS для обозначения фона документа

Давайте теперь добавим на страницу какой-либо блок и зададим фон ему. Скачайте это изображение и добавьте в нашу папку с файлами, а в код HTML-страницы поместите следующее:

Код 15. Блок с фоном в index.html

Код 15 вставьте, например, здесь:

Рис. 13. HTML блока с фоном

А CSS-файл дополните следующими стилями:

Код 16. Стилевые настройки блока с картинкой-фоном

После проведённых манипуляций, блок на странице примет вид:

Рис. 14. Результат настроек блока и его фона

Заметьте взглядом (код 16) свойство background-repeat . В нём указано round (изображение большое, поэтому указано автоматическое вмещение по ширине блока), но также, при необходимости, можно было указать :

• no-repeat — изображение будет в оригинальном размере без повторений в какую-либо из сторон
• repeat — если картинка меньше, то как по горизонтали, так и по вертикали, она повторяется до полного заполнения всего пространства заданного элемента (лишние остатки обрезаются)
• repeat-x — повторяется только по горизонтали (лишнее обрезается)
• repeat-y — повторяется по вертикали (лишнее обрезается)
• space — изображение заполняет всю область, не обрезаясь, а для полного равномерного заполнения блока между картинками добавляются пустые области

Эффекты при наведении на картинку (псевдоэлемент :hover )

Чтобы настроить изменение поведения изображения при наведении на него мышью, необходимо задать ему и стилизовать как нам угодно псевдокласс CSS :hover .

Давайте для примера добавим на нашу веб-страницу 3 новых картинки и зададим для них распространённые простые эффекты при наведении. Загрузите и поместите в папку данные 3 изображения: 1, 2, 3. После этого, разместите в index.html данный код :

Код 17. 3 картинки с эффектами при наведении

Чтобы в HTML-файле получилось следующее:

Рис. 15. Код картинок с эффектами в файле «index.html»

Теперь поочерёдно зададим стили эффектов каждой из 3-х картинок (коды: 18, 19 и 20) .

Код 18. Установка ширины и высоты 3-х картинок и эффект (появление тени) при наведении для первой Код 19. Переворачивание на 360 градусов 2-го изображения Код 20. Фильтр, повышающий насыщенность цветом на 200% для 3-го

В коде 18 обратите внимание на .article .effect . То есть картинки, к которым нужно применять эффекты, я выделил не только отдельными для них классами .img-osen, .img-krolik и .img-japonki , но также ввёл каждой из них по второму общему классу .effect (см. код 17 или рис. 15) , чтобы задать одинаковые ширину и высоту единоразово и не повторяться, указывая их отдельно в стилях каждого необходимого изображения.

Возможности CSS богаты, поэтому реализовать можно и множество других эффектов: от несложных, до более «продвинутых» ( в том числе, при желании, и дополнительно применяя какие-либо настройки программированием (на JavaScript обычно)). Всё зависит от необходимости и фантазии.

Примеры вставки графики на страницу

Изображение, как ссылка (тег <a> )

Сначала скачайте и загрузите в рабочую папку нужное изображение, которое, чтобы сделать ссылкой, требуется обернуть тегом <a> :

Код 21. Изображение внутри ссылки

Вставьте в рабочий файл, например, здесь:

Рис. 16. Картинка-ссылка в индексном файле

И добавьте этот CSS в стилевый файл:

Код 22. Стили для ссылки и изображения

Таким образом мы создали ссылку на текущую страницу .

Давайте подробно рассмотрим атрибуты ссылки (тега <a> ) (см. код 21):

• href . Здесь необходимо указать адрес, на который будет осуществляться переход при нажатии на ссылку (в нашем случае она содержит картинку) . Необходимый формат адреса:
  • Абсолютный:
    • С протоколом — https://nikmurashkin.ru/kodding/vyorstka/vstavit-kartinku-v-html (таким образом я указал в рассматриваемом примере (рис. 16))
    • Без протокола — //nikmurashkin.ru/kodding/vyorstka/vstavit-kartinku-v-html (это более универсально, поскольку если сайт, на который вы ссылаетесь, имеет только один протокол (например, http:// , но не предоставляет https:// ) или на текущий момент имеет доступ по двум протоколам, а в будущем это изменится, ваша универсальная ссылка, не зависимая от протокола, в любом случае останется рабочей

    Относительный — /kodding/vyorstka/vstavit-kartinku-v-html (без указания протокола и адреса домена) . Если ссылка на главную страницу, то необходимо указать href=»/» .

    Если вы ставите ссылки на своём сайте на свои же внутренние страницы, то лучше это делать данным способом, поскольку если в будущем вы решите сменить домен, не будет необходимости править все ранее проставленные ссылки со старым доменом.

    В итоге, картинка, которая является ссылкой, на рабочей веб-странице должна у вас принять следующий вид:

    Рис. 17. Изображение с планетами добавили на рабочую страницу в виде ссылки

    Кнопка картинкой или с иконкой внутри (теги: <input>, <button> ; <svg>, <object> ; кнопка «Скачать»)

    Далее рассмотрим, как сделать кнопку картинкой ( например, часто распространённая кнопка «Скачать») и как сделать текстовую кнопку , но также содержащую в себе нужную графическую иконку .

    Для этого будем использовать следующие HTML-элементы (теги):

    <input> — это поле ввода, обычно используемое в разнообразных формах на сайтах (поле для ввода логина, пароля и прочего).

    Если у тега атрибут type задан со значением submit ( <input type=»submit» value=»Отправить»> (кнопка с текстом «Отправить») (или type=»reset» (для сброса формы), type=»button» (какая-либо кнопка) ), то <input> является кнопкой; если параметр type имеет значение image ( <input type=»image» src=»https://nikmurashkin.ru/kodding/vyorstka/%D0%90%D0%B4%D1%80%D0%B5%D1%81%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8%20(%D0%BE%D1%82%D0%BD%D0%BE%D1%81%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D0%B8%D0%BB%D0%B8%20%D0%B0%D0%B1%D1%81%D0%BE%D0%BB%D1%8E%D1%82%D0%BD%D1%8B%D0%B9)» value=»Отправить»> ) — кнопкой-изображением (также, как и type=»submit» , выполняет функцию отправки формы ). Закрывающий тег не требуется.

    <button> — также имеет параметр type , который может принимать значения: submit (кнопка отправки) , reset (сброса) и button (любая другая кнопка) .

    Если type не задан, то по умолчанию подразумевается значение submit . В формах <button> может использоваться (и часто применяется) в роли кнопки вместо <input> .

    Преимущество <button> в том, что его можно более расширенно стилизовать (например, указывать в CSS стили псевдоэлементов ::before и ::after (у <input> этого сделать нельзя). Также, поскольку <button> имеет закрывающий тег, можно вписывать в кнопку, кроме текста, и другие HTML-теги (в input-кнопке только текст в параметре value )).

    • Если (в форме) нужна простая текстовая кнопка без иконки (+ можно через CSS задать в том числе и графический фон, при необходимости), то <input>
    • Если (в форме) нужна простая графическая кнопка, — <input> с type=»image» и указанием адреса картинки (параметр — src=»https://nikmurashkin.ru/kodding/vyorstka/%D0%90%D0%B4%D1%80%D0%B5%D1%81″ )
    • Если нужна более сложная кнопка ( или для формы, или в любом другом месте на странице (хотя, на текущий момент спецификация не запрещает и <input> использовать вне форм)), то <button>

    Изображение в <input> . Предварительно загрузите фоновое изображение, а также графическую кнопку и поместите их в нашу рабочую папку dobavlenie-kartinki . Теперь добавьте в index.html следующий код :

    Код 23. Графика в формах в <input>

    Чтобы получилось следующее:

    Рис. 18. Расположение кнопок <input> в коде индексного файла

    Код 24. CSS для <input>

    А в итоге на web-странице будет размещено таким образом:

    Рис. 19. Итоговый результат «input» с фоном-картинкой (с помощью свойства CSS background-image ) и отдельной графической кнопкой (с type=»image» и src=»https://nikmurashkin.ru/kodding/vyorstka/%D0%90%D0%B4%D1%80%D0%B5%D1%81%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F» )

    Обратите внимание на src=»https://nikmurashkin.ru/kodding/vyorstka/otpravit-zajavku.png» (см. код 23 или рис. 18) , где я указал относительный адрес картинки. Также можно было указать абсолютный https://nikmurashkin.ru/sites/default/files/inline-images/otpravit-zajavku.png .

    Изображение в <button> . Давайте сделаем кнопку посложнее, например, помимо текста, ещё и с иконкой внутри. Для примера создадим 3 кнопки, в одну из которых добавим img-картинку, а в 2-е другие — векторные <svg> ( непосредственно на страницу и добавлением через элемент <object> ).

    Пусть для наглядности эти кнопки будут активировать действие небольшого скрипта, который также напишем на «JavaScript» (не пугайтесь, я напишу, а вам достаточно просто скопировать вместе с HTML-кодом кнопок).

    Скачайте данную, а также эту иконки и разместите их в рабочую папку, а в индексный файл скопируйте следующий HTML:

    Код 25. Скрипт + блок, на который он оказывает влияние и кнопки управления

    Рис. 20. button-ы в index.html

    А в стили допишите следующее:

    Код 26. CSS для вышедобавленного HTML Рис. 21. Результат расположения кнопок с иконками на web-странице

    Замечания к нашим кнопкам с иконками (код. 25, рис. 20):

    • Атрибут type . Поскольку рассмотренные кнопки не находятся внутри форм, то большинство современных браузеров и так определит их тип, но по правилам «хорошего тона» стоит указать его явно, как я и сделал у всех <button> , добавив атрибут type=»submit» .
    • aria-hidden . Поскольку картинка в теге <img> является иконкой и не представляет из себя для читателя смысловой нагрузки (а служит декоративным элементом), то для пользователей «интернет-читалок» я указал атрибут aria-hidden=»true» , чтобы программы при проговаривании текста страницы не зачитывали бессмысленный текст атрибута alt (в нашем примере — это alt=»Иконка «Скрыть»» ) , а для пользователей браузеров, у которых может быть отключена поддержка картинок, вместо пустого места будет показана информация о картинке текстом из alt-а.

    Тег <svg> . Это тег для встраивания на странице масштабируемой векторной графики напрямую непосредственно в HTML-код. Часто используется для добавления иконок, которые при увеличении или уменьшении масштаба, не теряют в качестве.

    С подробным туториалом по SVG можно ознакомиться на «MDN».

    Преимущества и недостатки добавления изображений через тег <svg> напрямую на веб-страницу или встраивания с помощью <object> :

    • Если напрямую (inline) в <svg> — все внутренние элементы тега будут доступны для стилизации (например, у вас сложная картинка (иконка) и внешний вид отдельных её частей вы хотите как-либо по-разному настроить) обычным способом в CSS, но изображение не будет кешироваться браузером. Соответственно, больше подходит для вектроной графики, которая используется на отдельных страницах и не повторяется на большинстве.
    • Если встраивать через <object> — все стили отдельных частей изображения (при необходимости) нужно будет задавать стилевым атрибутом в коде SVG-картинки, а объектом уже встраивать её в HTML, но графика, подгруженная таким образом, кешируется браузерами. Соответственно, если иконка используется на множестве страниц сайта, этот способ предпочтительнее — для экономии запросов к серверу.

    Кнопка-ссылка в теге <a> . Изображение, как ссылку мы уже рассмотрели выше. Кнопка создаётся аналогичным образом: необходимая картинка в элементах <img> или <svg> просто оборачивается тегами <a> с указанием страницы (в атрибуте href ), на которую должен осуществляться переход по клику на ссылку-картинку (иконку).

    SVG-картинка, подгружаемая через <object> , тоже может быть ссылкой, но в этом случае ссылку нужно вставлять в код самого файла .svg (подробнее ниже) .

    Создадим графическую кнопку «Скачать», а также 2 векторные иконки ссылками , вставленные — одна через <svg> , другая — через <object> .

    Загрузите и поместите в рабочую папку три файла: 1, 2 и 3, а после этого разместите в соответствующих местах необходимые коды (код 27, код 28).

    Код 27. HTML-код кнопок и иконок-ссылок Рис. 22. Место добавления кода 27 Код 28. CSS для кода 27 Рис. 23. Внешний вид добавленных ссылками: 1-ой кнопки «Скачать» и 2-х векторных иконок

    Как сделать ссылкой SVG-картинку, загруженную через <object> . В блоке кода номер 27 обратите внимание на элемент <object type=»image/svg+xml» data=»bear.svg»></object> , который не обёрнут тегом <a> , как это сделано с <svg> и <img> тегами.

    Дело в том что, чтобы SVG-изображение, подгружаемое через <object> , сделать ссылкой, нужно прописать её в коде самого файла Название_картинки.svg ( в нашем случае — это медведь — в bear.svg ) (см. код 29) .

    Код 29. Содержимое файла «bear.svg»

    В коде bear.svg обратите внимание на атрибуты тега <svg> , в который, помимо обязательного xmlns=»http://www.w3.org/2000/svg» , я также добавил xmlns:xlink=»http://www.w3.org/1999/xlink» — он необходим, чтобы не было конфликтов между стандартными ссылками на веб-странице и подгружаемыми в объекте.

    Теперь нам необходимо обернуть все элементы картинки (в данном примере — все <path> ) стандартными тегами ссылок <a> , но вместо привычного href , адрес стоит указывать в атрибуте xlink:href (в примере я указал xlink:href=»https://nikmurashkin.ru/kodding/vyorstka/vstavit-kartinku-v-html» ).

    Ну а target=»_blank» , повторюсь, необходим для открытия ссылки в новом окне (или во вкладке (в зависимости от настроек браузера)).

    Также здесь посмотрите на <?xml-stylesheet type=»text/css» href=»style-svg.css»?> . Во встраиваемое через <object> SVG-изображение вносить стили нужно отдельно от стилевого файла страницы (поскольку <object> встраивается, как отдельная страница (объект)), а именно — в коде самой картинки SVG (в нашем случае файла bear.svg ) или подключением там же дополнительного файла CSS ( я подключил файл style-svg.css , в атрибуте href указав относительный адрес (также можно было задать абсолютный , например, href=»https://nikmurashkin.ru/sites/default/files/files/style-svg.css» )).

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