Как вставить картинку в HTML — элемент + настройка CSS: отступы, выравнивание, эффекты

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

Картинка, на которой много всего

Привет, друзья!

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

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

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

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

<!DOCTYPE html>

<html lang="ru">
	
 <head>
  <meta charset="utf-8">
  <title>Мой сайт о браузерах</title>
  
  <!-- +++++ Здесь будем подключать файл стилей CSS +++++ -->
  
 </head>

 <body>
 
  <!--===== Шапка =====-->
  <header class="header">
   <!-- Логотип и название сайта-->
   <a href="https://nikmurashkin.ru" class="logo">
    <img src="logo.png" alt="Логотип">
    <p class="name">Сайт о браузерах</p>
   </a>
   
   <!-- Меню сайта -->
   <nav class="navigation">
    <ul>
     <li>
      <a href="/">Категория 1</a>
     </li>
     <li>
      <a href="/">Категория 2</a>
     </li>
     <li>
      <a href="/">Категория 3</a>
     </li>
    </ul>
   </nav>
  </header>
  
  <!--===== Контент =====-->
  <div class="content">
   
   <main class="main-content">
   
    <!-- Текст страницы -->
    <article class="article">
     <h1>Статья о популярных браузерах</h1>
     <p>А вы знали, что есть интернет-обозреватели, которые называются браузерами? А знаете, что есть среди них популярные и «продвинутые»? Так вот, в этой статье мы о них расскажем. :)</p>
	 
	 
	 
     <!-- +++++ Сюда будем вставлять код картинки +++++ -->
	 
	 
	 
     <p>В заключении хочется порекомендовать пользоваться популярными браузерами, потому что их выбирает большинство. А поскольку они приходятся по вкусу столь огромному числу интернет-пользователей, значит они очень замечательные. :)</p>
	 
     <!-- Комментарии к статье -->
     <section class="comments">
      <h2>Комментарии</h2>
      <article>Первый комментарий</article>
      <article>Второй комментарий</article>
     </section>
    </article>
	
    <!-- Дополнительный контент по теме -->
    <section class="additionally">Какой-либо вспомогательный для статьи контент...</section>
   
   </main>
   
   <!-- Правая колонка (sidebar) -->
   <aside class="sidebar">Блоки правой колонки сайта</aside>
  
  </div>

  <!--===== Подвал =====-->
  <footer class="footer">Копирайты сайта</footer>
 
 </body>

</html>
Код 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 (скачать), которое поместите в нашу обозначенную папку:

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

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

<!-- +++++ Сюда будем вставлять код картинки +++++ -->
Код 2. Место для вставки картинки

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

<img src="brauzer.jpg" width="900px" height="600px" alt="Окно хорошего браузера" title="В браузере «Google Chrom» открыта страница поисковой системы">
Код 3. Код картинки — тег <img>

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

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

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

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

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

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

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

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

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

  • title — всплывающая подсказка при наведении мышью на изображение. Если нет явной необходимости, то данный параметр веб-мастерами часто не используется.

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

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

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

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

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

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

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

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

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

<!-- +++++ Здесь будем подключать файл стилей CSS +++++ -->
Код 4. Место для подключения CSS-файла стилей

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

<link rel="stylesheet" href="style.css">
Код 5. Тег <link>, подключающий файл стилей

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

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

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

@charset "utf-8"; /* Кодировка данного файла */

/* Ширина, отступы и основной текст страницы */
body {
  width: 82%;
  margin: 25px auto;
  font-size: 16px;
  font-family: "Times New Roman", Times, serif;
}

/* Заголовок статьи */
h1 {
  font-size: 34px;
  margin-top: 54px;
}

/* Шапка и положение основного контейнера .content */
.header {
  display: flow-root;
  border-bottom: 3px double;
  padding-bottom: 18px;
}
.logo, .content {
  display: flex;
}
.logo {
  min-width: 404px;
  float: left;
}
.name {
  margin: auto 0 auto 26px;
  font-size: 38px;
}
.navigation {
  float: right;
  margin-top: 11px;
}
.navigation li {
  display: inline-block;
  list-style: none;
  text-transform: uppercase;
  margin-left: 12px;
}

/* Блок комментариев */
.comments {
  margin-top: 42px;
  border-top: 1px dotted;
  clear: both;
}

/* Блок вспомогательного контента */
.additionally {
  background: #f7f7f7;
  margin-top: 26px;
  padding: 20px;
}

/* Правая колонка (sidebar) */
.sidebar {
  min-width: 154px;
  background: #eee;
  margin-top: 76px;
  margin-left: 52px;
  padding: 20px 20px 0 20px;
}

/* Подвал (копирайты) */
.footer {
  text-align: center;
  margin-top: 50px;
  font-size: 12px;
}
Код 6. CSS-код для основной настройки веб-страницы

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

/* +++++ Настройки картинки +++++ */


/* Вписывание графики в ширину контейнера */
img {
  max-width: 100%;
}
Код 7. Настройка для вмещения картинки в свой контейнер

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

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

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

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

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

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

/* Настройка ширины и высоты изображения */
.article img {
  width: 300px; /* Ширина */
  height: 200px; /* Высота */
}
Код 8. Настройка ширины и высоты изображения

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

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

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

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

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

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

/* Выравнивание и отступы */
.article img {
  margin: 3px 20px 16px 0; /* Отступы: Сверху Справа Снизу Слева */
  float: left; /* Изображение слева, а текст обтекает справа */
}
Код 9. CSS-код для выравнивания картинки по левому краю

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

<!-- +++++ Ещё несколько абзацев и вторая картинка между ними +++++ -->
<p>В заключении хочется порекомендовать пользоваться популярными браузерами, потому что их выбирает большинство. А поскольку они приходятся по вкусу столь огромному числу интернет-пользователей, значит они очень замечательные. :)</p>
<p>В заключении хочется порекомендовать пользоваться популярными браузерами, потому что их выбирает большинство. А поскольку они приходятся по вкусу столь огромному числу интернет-пользователей, значит они очень замечательные. :)</p>
<img src="brauzer2.jpg" class="img-two" width="900px" height="598px" alt="Второе окно хорошего браузера">
<p>В заключении хочется порекомендовать пользоваться популярными браузерами, потому что их выбирает большинство. А поскольку они приходятся по вкусу столь огромному числу интернет-пользователей, значит они очень замечательные. :)</p>
<p>В заключении хочется порекомендовать пользоваться популярными браузерами, потому что их выбирает большинство. А поскольку они приходятся по вкусу столь огромному числу интернет-пользователей, значит они очень замечательные. :)</p>
<p>В заключении хочется порекомендовать пользоваться популярными браузерами, потому что их выбирает большинство. А поскольку они приходятся по вкусу столь огромному числу интернет-пользователей, значит они очень замечательные. :)</p>
Код 10. Несколько абзацев и вторая картинка в index.html

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

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

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

.article .img-two {
  margin-left: 20px; /* Отступ cлева */
  margin-right: 0; /* Отступ cправа */
  float: right; /* Изображение справа, а текст обтекает слева */
}
Код 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) месте):

<!-- +++++ Ещё несколько абзацев и третья картинка +++++ -->
<img src="brauzer3.jpg" class="img-three" width="900px" height="598px" alt="Третье окно хорошего браузера">
<p>В заключении хочется порекомендовать пользоваться популярными браузерами, потому что их выбирает большинство. А поскольку они приходятся по вкусу столь огромному числу интернет-пользователей, значит они очень замечательные. :)</p>
Код 12. Код для добавления на страницу 3-го изображения
3 картинка в index.html
Рис. 11. Код третьей картинки и дополнительный абзац текста в index.html

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

.article .img-three {
  display: block; /* Делаем изображение блочным */
  margin-left: auto; /* Отступ cлева */
  margin-right: auto; /* Отступ cправа */
  float: none; /* Отключим обтекание изображения */
}
Код 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 следующий код (предварительно скачайте и поместите в рабочую папку картинку, которая будет фоном):

/* Фон страницы */
body {
  background-image: url(fon-body.png); /* Адрес изображения. Указан относительный, но может быть абсолютным */
}
Код 14. CSS для обозначения фона документа

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

<div class="block-background">
  <p>В заключении хочется порекомендовать пользоваться популярными браузерами, потому что их выбирает большинство. А поскольку они приходятся по вкусу столь огромному числу интернет-пользователей, значит они очень замечательные. :)</p>
  <p>В заключении хочется порекомендовать пользоваться популярными браузерами, потому что их выбирает большинство. А поскольку они приходятся по вкусу столь огромному числу интернет-пользователей, значит они очень замечательные. :)</p>
  <p>В заключении хочется порекомендовать пользоваться популярными браузерами, потому что их выбирает большинство. А поскольку они приходятся по вкусу столь огромному числу интернет-пользователей, значит они очень замечательные. :)</p>
  <p>В заключении хочется порекомендовать пользоваться популярными браузерами, потому что их выбирает большинство. А поскольку они приходятся по вкусу столь огромному числу интернет-пользователей, значит они очень замечательные. :)</p>
  <p>В заключении хочется порекомендовать пользоваться популярными браузерами, потому что их выбирает большинство. А поскольку они приходятся по вкусу столь огромному числу интернет-пользователей, значит они очень замечательные. :)</p>
</div>
Код 15. Блок с фоном в index.html

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

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

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

/* Блок с фоном */
.block-background {
  margin-top: 3px; /* Увеличим немного отступ блока от предыдущего абзаца текста */
  background-image: url(fon-blok.jpg); /* Адрес изображения для фона блока */
  background-repeat: round; /* Изображение шире блока, но чтобы не обрезалось и полностью помещалось в блок, указано «round» в данном свойстве */
  padding: 14px 24px; /* Отступы от внутренних стенок блока: Сверху/снизу Справа/слева */
}
.block-background p {
  padding: 10px 14px; /* Отступы от внутренних стенок у абзацев внутри блока: Сверху/снизу Справа/слева */
}
.block-background p:nth-child(odd) {
  background-color: #ccc; /* Цвет фона у нечётных абзацев в блоке */
}
.block-background p:nth-child(even) {
  background-color: #999; /* Цвет фона у чётных абзацев в блоке */
}
Код 16. Стилевые настройки блока с картинкой-фоном

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

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

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

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

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

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

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

<!-- +++++ Картинки с эффектами при наведении +++++ -->
<p>Картинки с эффектами при наведении:</p>
<img src="osen.jpg" class="img-osen effect" width="900px" height="600px" alt="Осень">
<img src="krolik.jpg" class="img-krolik effect" width="900px" height="600px" alt="Кролик">
<img src="japonki.jpg" class="img-japonki effect" width="900px" height="546px" alt="2 японки">
Код 17. 3 картинки с эффектами при наведении

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

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

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

/* Эффекты при наведении на изображения */
.article .effect { /* Трём изображениям зададим ширину и высоту, равными 100% */
  width: 100%; /* Ширина */
  height: 100%; /* Высота */
}
.article .img-osen:hover { /* Эффект при наведении на 1-ю картинку */
  box-shadow: 0 0 14px 0 #000; /* Тень: Смещение по ширине Смещение по высоте Радиус размытия Растяжение Цвет */
  transition-duration: .5s; /* Эффект происходит в течение 0,5 секунды */
}
Код 18. Установка ширины и высоты 3-х картинок и эффект (появление тени) при наведении для первой
.article .img-krolik:hover { /* Эффект при наведении на 2-ю картинку */
  transform: rotate(360deg); /* Трансформация изображения на 360 градусов */
  transition-duration: 10s; /* Эффект происходит в течение 10 секунд */
}
Код 19. Переворачивание на 360 градусов 2-го изображения
.article .img-japonki:hover { /* Эффект при наведении на 3-ю картинку */
  filter: saturate(300%); /* Повышение насыщенности цветов изображения на 200% */
}
Код 20. Фильтр, повышающий насыщенность цветом на 200% для 3-го

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

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

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

Далее рассмотрим как сделать картинку ссылкой и добавление изображения в кнопку...

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

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

<!-- +++++ Картинка-ссылка +++++ -->
<p>Картинка в виде ссылки:</p>
<a href="https://nikmurashkin.ru/kodding/vyorstka/vstavit-kartinku-v-html" target="_blank" title="Сайтостроение, Интернет, финансы"><img src="planety.jpg" class="img-link" width="900px" height="600px" alt="2 планеты"></a>
Код 21. Изображение внутри ссылки

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

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

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

/* Картинка, как ссылка */
.article a:hover::before {
  content: 'Привет! Это ссылка-картинка.'; /* Текст, всплывающий рядом с изображением при наведении на него мышью */
  padding: 8px 12px; /* Отступы внутри всплывающего текста: Сверху/снизу Слева/справа */
  background-color: #ccdfc7; /* Цвет фона всплывающего текста */
  position: relative; /* Позиционирование в потоке относительно предыдущего элемента: позиционируем текст в псевдоэлементе «::before» относительно его элемента (ссылки («a»)) (необходимо указать, чтобы задать отступ свойством «top») */
  top: 11px; /* Отступ сверху при заданном «position: relative» */
}
.article a:hover .img-link {
  opacity: 0.98; /* При наведении картинка приобретает небольшую прозрачность (по сути, становится чуть светлее) */
}
Код 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="/".

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

  • target. Здесь я задал _blank, чтобы ссылка открывалась в новой вкладке. Если удалить target="_blank", соответственно, переход будет осуществляться в текущей вкладке браузера. Большинство интернет-ресурсов используют открытие страниц в новой вкладке, в основном, только для внешних ссылок (на другие сайты).
  • title. Текст всплывающей подсказки, появляющейся при наведении мышью на ссылку. Данный атрибут разработчиками всё чаще не используется. С какого-то времени на своём сайте я так же почти полностью отказался от него. Но если по какой-либо причине на ссылке нужна подсказка, то указать стоит, конечно же.

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

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

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

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

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

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

    Если у тега атрибут type задан со значением submit (<input type="submit" value="Отправить"> (кнопка с текстом «Отправить») (или type="reset" (для сброса формы), type="button" (какая-либо кнопка)), то <input> является кнопкой; если параметр type имеет значение image (<input type="image" src="Адрес картинки (относительный или абсолютный)" 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="Адрес")
    • Если нужна более сложная кнопка (или для формы, или в любом другом месте на странице (хотя, на текущий момент спецификация не запрещает и <input> использовать вне форм)), то <button>
  • <a> — применяется для кнопок-ссылок. То есть, если <input> или <button> используются в формах (в теге <form>) или в каком-либо другом месте на странице (например, для запуска определённого действия на странице по нажатию пользователем кнопки), то <a> используется для кнопок, которые ссылаются на какую-либо страницу или на файл (например, кнопка «Скачать»). В <a> есть параметр href (куда мы задаём ссылку), а в <button> (или <input>), соответственно, такой параметр не используется. Закрывающий тег нужен.

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

<!-- +++++ Кнопка «Найти» (внутри формы) с изображением в качестве фона +++++ -->
<p class="clearfix">Форма и кнопка в ней с фоном через CSS-свойство «background-image»:</p>
<form action="https://www.google.com/search" method="get">
 <label>Введите запрос в поисковую систему «Google»:<br><input class="field-input" type="search" name="q"></label>
 <input class="button-input submit-input-fon" type="submit" value="Найти">
</form>
	 
<!-- +++++ Графическая кнопка «ОТПРАВИТЬ ЗАЯВКУ» (внутри формы) +++++ -->
<p>Форма и графическая кнопка в ней (&lt;input&gt; имеет type="image"):</p>
<form action="https://nikmurashkin.ru/kodding/vyorstka/vstavit-kartinku-v-html" method="get">
 <label class="label-image">Введите Ваше имя:<br><input class="field-input" type="text"></label>
 <input class="submit-image" src="otpravit-zajavku.png" type="image" value="Отправить заявку">
</form>
Код 23. Графика в формах в <input>

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

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

Это в style.css:

/* Кнопки с картинками в формах */
form {
  display: flow-root; /* Убрать «наползание» последующего элемента из-за плавающих элементов внутри */
}
.clearfix {
  clear: left; /* Для абзаца «Формы и кнопки:» запрет обтикания левым краем (чтобы не помещался справа от изображения выше него) */
}
.field-input, .button-input {
  padding: 12px; /* Отступы с 4-х сторон (сверху, снизу, справа и слева) внутри полей ввода и кнопок */
}
.submit-input-fon {
  background-image: url(fon-input.png); /* Адрес изображения для фона кнопки «input» в форме поиска */
  color: #fff; /* Цвет текста в кнопке в форме поиска */
}
.submit-input-fon:hover { /* При наведении на кнопку «Найти» */
  cursor: pointer; /* Курсор в виде руки и пальца */
  opacity: 0.94; /* Небольшая прозрачность */
}
.label-image {
  float: left; /* Позиционирование поля ввода имени к левому краю */
}
.submit-image {
  position: relative; /* Позиционирование в потоке относительно предыдущего элемента: позиционируем графическую кнопку «ОСТАВИТЬ ЗАЯВКУ» относительно поля ввода имени */
  top: 18px; /* Отступ сверху при заданном «position: relative» */
  left: 3px; /* Отступ слева при заданном «position: relative» */
}
.submit-image:hover { /* При наведении на кнопку «ОСТАВИТЬ ЗАЯВКУ» */
  opacity: 0.9; /* Небольшая прозрачность */
}
Код 24. CSS для <input>

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

«input» на странице
Рис. 19. Итоговый результат «input» с фоном-картинкой (с помощью свойства CSS background-image) и отдельной графической кнопкой (с type="image" и src="Адрес изображения")

Обратите внимание на src="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:

<!-- +++++ Блок для скрипта, кнопки активации и сам скрипт +++++ -->
<div class="block-for-script">
 <p>Этот блок будет скрыт или показан по нажатию соответствующей кнопки ниже. Этот блок будет скрыт или показан по нажатию соответствующей кнопки ниже.</p>
 <p>Этот блок будет скрыт или показан по нажатию соответствующей кнопки ниже. Этот блок будет скрыт или показан по нажатию соответствующей кнопки ниже.</p>
</div>

<!-- Кнопка с иконкой <img> -->
<button type="submit" class="button button-img"><img src="hide.png" width="64px" height="64px" alt="Иконка «Скрыть»" aria-hidden="true">Скрыть</button>
<!-- Кнопка с иконкой <svg>, вставленная напрямую на страницу -->
<button type="submit" class="button button-svg-inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M.2 10a11 11 0 0 1 19.6 0A11 11 0 0 1 .2 10zm9.8 4a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>Показать</button>
<!-- Кнопка с иконкой <svg>, вставленная через <object> -->
<button type="submit" class="button button-svg-object"><object type="image/svg+xml" data="paint.svg"></object>Покрасить</button>

<!-- Скрипт взаимодействия с блоком по нажатиям кнопок -->
<script>'use strict';
  var blockForScript = document.getElementsByClassName('block-for-script')[0], // Находим блок с текстом
      buttonImg = document.getElementsByClassName('button-img')[0], // Находим кнопку «Скрыть»
      buttonSvgInline = document.getElementsByClassName('button-svg-inline')[0], // Находим кнопку «Показать»
      buttonSvgObject = document.getElementsByClassName('button-svg-object')[0]; // Находим кнопку «Покрасить»
  function Hide() { // Функция скрытия блока
    blockForScript.setAttribute('hidden', ''); // Добавление блоку атрибута «hidden» для его скрытия
  }
  buttonImg.addEventListener('click', Hide); // Выполнение функции скрытия «Hide» по клику на кнопку «Скрыть»
  function Show() { // Функция для показа блока, если он скрыт
    blockForScript.removeAttribute('hidden'); // Удаление у блока атрибута «hidden» для его отображения
  }
  buttonSvgInline.addEventListener('click', Show); // Выполнение функции показа блока «Show» при клике на кнопку «Показать»
  function Paint() { // Функция перекрашивания фона блока
    blockForScript.style.backgroundColor = 'orange'; // Сделать фон блока оранжевым, добавив атрибут стиля с соответствующим CSS-свойством
  }
  buttonSvgObject.addEventListener('click', Paint); // Выполнить функцию перекрашивания блока «Paint» при нажатии на кнопку «Покрасить»
</script>
Код 25. Скрипт + блок, на который он оказывает влияние и кнопки управления

В это место:

Кнопки «button»
Рис. 20. button-ы в index.html

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

/* Кнопки с иконками для взаимодействия со скриптом */
.block-for-script { /* Блок для скрипта */
  margin-top: 24px; /* Отступ сверху */
  padding: 4px 20px; /* Внутренний отступ: Сверху/снизу Справа/слева */
  border: 1px solid #aaa; /* Рамка: Ширина Стиль Цвет */ 
}
.button { /* Общее для кнопок */
  font-size: 18px; /* Размер шрифта кнопок */
  margin-top: 12px; /* Отступ от верхних границ */
  padding: 10px; /* Внутренние отступы: Сверху Справа Снизу Слева */
}
.button:hover {
  cursor: pointer; /* Курсор (рука с пальцем) при наведении на кнопки */
}
.button-img img { /* Иконка, вставленная тегом <img> */
  width: 18px; /* Ширина */
  height: 18px; /* Высота */
  margin: 1px 6px 0 0; /* Внешние отступы: Сверху Справа Снизу Слева */
}
.button-svg-inline {
  padding-top: 6px; /* Отступ внутри кнопки, вставленной через <svg> напрямую на страницу, от верхней границы */
}
.button-svg-inline svg { /* Иконка, вставленная напрямую на страницу через тег <svg> */
  width: 20px; /* Ширина */
  height: 20px; /* Высота */
  position: relative; /* Позиционирование */
  top: 4px; /* Отступ от границы кнопки сверху */
  left: 0; /* Отступ от границы кнопки слева */
  margin-right: 6px; /* Отступ от правой границы иконки */
}
.button-svg-object { /* Кнопка с иконкой, вставленной через тег <object> */
  background-color: #2a2a2a; /* Цвет фона */
  color: #f1f1f1; /* Цвет текста */
  padding-top: 2px; /* Отступ от верхней границы кнопки */
}
.button-svg-object:hover {
  background-color: #383838; /* Цвет кнопки, вставленной через тег <object>, при наведении на неё мышью */
}
.button-svg-object object { /* Иконка, вставленная через тег <object> */
  position: relative; /* Позиционирование */
  top: 7px; /* Отступ от границы кнопки сверху */
  width: 26px; /* Ширина */
  height: 26px; /* Высота */
  margin-right: 4px; /* Отступ от правой границы иконки */
}
Код 26. CSS для вышедобавленного HTML
button на странице
Рис. 21. Результат расположения кнопок с иконками на web-странице

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

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

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

  • <object>. Через этот тег я вставил 3-ю кнопку — «Покрасить». Данный элемент предназначен для добавления объектов, в которые в том числе могут входить и SVG-изображения. Чтобы браузерам было понятно, какой именно объект встроен, в соответствующих атрибутах я указал: type="image/svg+xml" (то есть — графика/SVG) и data="paint.svg" (адрес объекта, из которого необходимо подгрузить данные). Я указал относительный путь, но также можно было задать и абсолютный https://nikmurashkin.ru/sites/default/files/inline-images/paint.svg.

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

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

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

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


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

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

<!-- +++++ Графическая кнопка-ссылка «Скачать» и ссылки-иконки +++++ -->
<!-- Кнопка-ссылка «Скачать» -->
<p class="skachat-knopka-p">
 <a href="https://nikmurashkin.ru/sites/default/files/files/skachat-knopka.zip" class="no-before skachat-knopka-a" target="_blank"><img src="skachat-knopka.png" class="skachat-knopka" width="618px" height="189px" alt="Скачать архив"></a>
</p>
<!-- Иконка-ссылка, вставленная напрямую в HTML-код тегом <svg> -->
<a href="https://nikmurashkin.ru/kodding/vyorstka/vstavit-kartinku-v-html" class="no-before a-glass" target="_blank">
 <svg class="svg-glass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M142.82 476.627H231.582M231.582 476.627H320.345H232.457V351.135L347.701 219.084M231.582 476.627V351.135L117.138 219.084M117.138 219.084L44 134.694H303.729H421.351L347.701 219.084M117.138 219.084H347.701" />
  <path	d="M290.612 134.694C290.612 115.441 296.187 96.5998 306.663 80.4465C317.14 64.2933 332.069 51.5191 349.648 43.6673C367.228 35.8154 386.705 33.2218 405.726 36.1997C424.747 39.1777 442.5 47.5998 456.838 60.4486C471.176 73.2974 481.488 90.0231 486.526 108.605C491.564 127.187 491.114 146.831 485.23 165.163C479.346 183.495 468.279 199.731 453.367 211.909C438.455 224.088 420.336 231.688 401.198 233.791" />
 </svg>
</a>
<!-- Иконка-ссылка, встроенная тегом <object> -->
<object class="object-bear" type="image/svg+xml" data="bear.svg"></object>
Код 27. HTML-код кнопок и иконок-ссылок
Место вставки кода кнопок и иконок-ссылок
Рис. 22. Место добавления кода 27
/* Графическая кнопка-ссылка «Скачать» и ссылки-иконки */
.skachat-knopka-p { /* Параграф с кнопкой «Скачать» */
 text-align: center; /* Выравнивание по центру */
 margin-top: 40px; /* Отступ от верхней границы */
}
.article .no-before:hover::before {
  content: none; /* Ранее для ссылок задали всплывающую фразу «Привет! Это ссылка-картинка.» при наведении мышью. Теперь отменим это у ссылок с классом .no-before */
}
.article .skachat-knopka { /* Кнопка «Скачать» */
  width: auto; /* Ширина */
  height: auto; /* Высота */
  float: none; /* Отмена этой картинке ранее выставленной для всех изображений страницы обтекаемости */
}
.skachat-knopka-a:hover, .a-glass:hover {
  opacity: 0.86; /* Небольшая прозрачность при наведении ссылку с кнопкой «Скачать», а также на ссылку-иконку (бокал) */
}
.svg-glass { /* SVG-иконка (бокал) */
  fill: none; /* Убираем заливку */
  width: 130px; /* Ширина */
  height: 130px; /* Высота */
}
.svg-glass path { /* Элементы внутри иконки (бокала) */
  stroke: maroon; /* Цвет обводки */
  stroke-width: 40; /* Ширина обводки */
}
.object-bear { /* SVG-иконка (медведь) */
  width: 130px; /* Ширина */
  height: 130px; /* Высота */
}
Код 28. CSS для кода 27
Внешний вид: кнопка «Скачать» и две иконки-ссылки
Рис. 23. Внешний вид добавленных ссылками: 1-ой кнопки «Скачать» и 2-х векторных иконок

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

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

<?xml-stylesheet type="text/css" href="style-svg.css"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 340 340">
 <a xlink:href="https://nikmurashkin.ru/kodding/vyorstka/vstavit-kartinku-v-html" class="object-bear-a" target="_blank">
  <path d="M300.629,180.687s-1.107,52,2.05,119.932a34.97,34.97,0,0,0,3.041,12.966,25.752,25.752,0,0,1,1.063,2.725c2.017,6.167-2.988,12.388-9.746,12.275l-30.933-.514c-9.778-.163-17.709-7.638-18.013-16.978L245.9,243.856Z" class="color-one" />
  <path d="M209.144,50.734s-52,4.824-96.824,56.9a2.45,2.45,0,0,0,.117,3.315,13.291,13.291,0,0,0,5.9,3.631s-60.574,22.006-86.782,96.08c0,0-31.528,86.416,29.2,114.811a30.024,30.024,0,0,0,12.72,2.773h80.194a29.333,29.333,0,0,0,13.088-2.949,23.434,23.434,0,0,0,10.776-10.5s4.959,13.446,17.666,13.446H219.21a13.639,13.639,0,0,0,9.8-4.011c5.675-5.831,2.837-13.129,2.09-20.27a121.124,121.124,0,0,1-.819-18.028v-5.249a22.99,22.99,0,0,1,6.55-16.338,22.128,22.128,0,0,1,8.72-5.338s35.818-11.32,53.43-62.01a127.316,127.316,0,0,0,6.867-41.8V143.4a26.285,26.285,0,0,1,4.248,4.032,1.79,1.79,0,0,0,3.058-.613c2.517-7.832,7.664-29.392-2.967-51.149Z" class="color-two" />
  <path d="M310.183,95.674,209.144,50.734s-.706-1.174-12.074,2.356c-24.026,20.107-22.237,46.274-22.231,47.329a8,8,0,0,0,8,7.957,8.155,8.155,0,0,0,.935-.054l2.787-.328c1.647,13.156,7.027,20.71,7.754,21.679a8,8,0,0,0,6.378,3.2h.022a8,8,0,0,0,6.336-3.116c14.677,21.376,34.452,25.367,35.411,25.548a8,8,0,0,0,7.224-2.283l.2-.2.142.166a8,8,0,0,0,8.162,2.537c.944-.253,19.947-5.574,32.615-25.261a8,8,0,0,0,5.912,2.611h.022a8,8,0,0,0,6.378-3.2c.727-.969,6.107-8.523,7.754-21.679l2.787.328a8.155,8.155,0,0,0,.935.054c.057,0,.114-.006.171-.007A62.458,62.458,0,0,0,310.183,95.674Z" class="color-one" />
  <path d="M296.562,54.88c2.213-13.274.7-23.45-1.882-30.857C289.823,10.1,271.534,6.87,262.55,18.567a48.509,48.509,0,0,0-6.933,13.038c-2.22-.525-11.587-.525-13.807,0a48.509,48.509,0,0,0-6.933-13.038c-8.984-11.7-27.273-8.47-32.13,5.456-2.583,7.407-4.1,17.583-1.882,30.857-18.16,20.534-18.027,45.5-18.027,45.5l11.256-1.324c-.332,16.552,6.62,25.821,6.62,25.821l7.283-9.6c12.91,27.806,35.953,32.172,35.953,32.172l6.321-6.5,5.841,6.851s23.332-6.263,33.318-32.523l7.283,9.6s6.952-9.269,6.621-25.821l11.255,1.324S314.722,75.414,296.562,54.88Z" class="color-two" />
  <path d="M214.767,44.205c3.427-2.216,9.607-6.13,14.444-8.74a3.282,3.282,0,0,0,1.545-3.987c-.368-1.038-.846-2.3-1.43-3.648-3.589-8.3-15.931-6.884-17.424,2.032a45.367,45.367,0,0,0-.178,12.889A1.983,1.983,0,0,0,214.767,44.205Z" class="color-one" />
  <path d="M283.874,43.33c-3.427-2.215-9.607-6.13-14.444-8.74a3.281,3.281,0,0,1-1.545-3.986c.368-1.039.846-2.3,1.43-3.648,3.589-8.3,15.931-6.885,17.424,2.031a45.367,45.367,0,0,1,.178,12.889A1.983,1.983,0,0,1,283.874,43.33Z" class="color-one" />
  <path d="M264.8,198.65l-2.981-5.728c-3.86,3.94-10.563,7.527-15.053,9.667a8.43,8.43,0,0,1-8.439-.7,203.145,203.145,0,0,0-22.9-13.773,116.839,116.839,0,0,0-25.836-9.313,143.4,143.4,0,0,1,21.329,17.724c21.668,20.136,38.779,26.3,46.473,28.162a9.747,9.747,0,0,0,7.79-1.448c18.4-12.6,30.009-26.5,37.084-37.463a130.066,130.066,0,0,0,3.576-30.582V143.4c-11.713,38.5-29.866,52.4-36.811,56.48A3.042,3.042,0,0,1,264.8,198.65Z" class="color-one" />
  <path d="M233.912,81.658a3.983,3.983,0,0,1-2.4-.8,23.906,23.906,0,0,0-7-3.363,4,4,0,0,1,2.061-7.731,31.982,31.982,0,0,1,9.738,4.695,4,4,0,0,1-2.4,7.2Z" class="color-three" />
  <path d="M263.515,81.658a4,4,0,0,1-2.4-7.2,31.994,31.994,0,0,1,9.738-4.694,4,4,0,0,1,2.069,7.728,23.9,23.9,0,0,0-7.006,3.367A3.991,3.991,0,0,1,263.515,81.658Z" class="color-three" />
  <path d="M159.891,223.757a12.225,12.225,0,0,0-4-5.661l-.061-.048a2.685,2.685,0,0,0-4.195,3.018,130.137,130.137,0,0,1,7.336,32.526s2.3,38.438,11.954,69.114a22.486,22.486,0,0,0,6.605-7.908c-9.349-20.4-11.416-62.107-11.416-62.107A140.754,140.754,0,0,0,159.891,223.757Z" class="color-one" />
  <path d="M233.838,239.04a1.811,1.811,0,0,0-3.561.544c1.564,10.218.585,31,.164,38.4a22.642,22.642,0,0,1,6.386-13.639,22,22,0,0,1,3.026-2.508Z" class="color-one" />
  <path d="M140.365,267.545h-.058a4,4,0,0,1-3.425-2.031c-3.337-5.905-11.131-11.873-11.21-11.932l-.14-.113A34.679,34.679,0,0,0,99,245.567a4.01,4.01,0,0,1-4.631-4.74,24.356,24.356,0,0,0,.371-5.225,61.874,61.874,0,0,0-14.235,9,4,4,0,0,1-5.347-5.95,67.438,67.438,0,0,1,21.893-12.519,4,4,0,0,1,5.19,3.193,50.582,50.582,0,0,1,.491,7.971h.2a43.2,43.2,0,0,1,27.657,9.967,66.938,66.938,0,0,1,10,9.631c3.847-3.977,10.657-8.929,20.071-7.844a4,4,0,1,1-.919,7.947c-9.934-1.151-15.892,8.514-15.951,8.612A4,4,0,0,1,140.365,267.545Z" class="color-one" />
  <path d="M219.284,203.818l-14.629-20.431c-27.069-10.39-32.195-17.109-42.433-40.205-.857-1.934-1.858-3.767-3.974-3.778a4.012,4.012,0,0,0-4.011,3.738,20.736,20.736,0,0,1-2.192,8.077s-9.436-9.795-7.149-37.19a1.763,1.763,0,0,0-3.386-.818l-.019.048c-.415,1.051-9.957,25.977,7.435,47.382a4,4,0,0,0,5.846.39,22.135,22.135,0,0,0,3.313-4.281,54.869,54.869,0,0,0,7.156,11.178,69.47,69.47,0,0,0,23.91,18.6A205.3,205.3,0,0,1,219.284,203.818Z" class="color-one" />
  <path d="M248.714,87.534a24.177,24.177,0,0,0-8.135,1.394c-4.5,1.605-6.32,6.523-3.887,10.308a27.407,27.407,0,0,0,10.671,9.39,3.029,3.029,0,0,0,2.7,0,27.413,27.413,0,0,0,10.67-9.39c2.433-3.785.618-8.7-3.887-10.308A24.175,24.175,0,0,0,248.714,87.534Z" class="color-three" />
  <path d="M174.807,316.915l-12.319-32.164s1.671,16.971-14.213,25.143a31.109,31.109,0,0,1-14.25,3.287H72.163a49.322,49.322,0,0,1-30.317-10.289A77.988,77.988,0,0,1,27.763,288.44c4.987,14.949,14.889,28.568,32.991,37.031a30.017,30.017,0,0,0,12.719,2.773h80.194a29.333,29.333,0,0,0,13.088-2.949,24.144,24.144,0,0,0,8.81-7.3Z" class="color-one" />
 </a>
</svg>
Код 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-файл не обязательно, но если это не единичные стили, то такое решение компактнее.

@charset "utf-8"; /* Кодировка данного файла */

/* Настройки SVG-иконки (медведя) */
.object-bear-a:hover {
  opacity: 0.86; /* Небольшая прозрачность при наведении на ссылку-иконку */
}
.color-one {
  fill: #af543f; /* Первый цвет SVG-изображения */
}
.color-two {
  fill: #e8947e; /* Второй цвет SVG-изображения */
}
.color-three {
  fill: #373d4c; /* Третий цвет SVG-изображения */
}
Код 30. Стилевые настройки для SVG-иконки (медведя)

Скачать исходники

Дискуссия по теме