Гиперссылка html картинка: Изображение в качестве ссылки | htmlbook.ru

html — Разные части SVG картинки, как разные ссылки

Картинка состоит из нескольких объектов, допустим, квадрат и круг. Хотелось бы, чтобы при нажатии на круг происходил переход на один сайт, при нажатии на квадрат на другой сайт. Можно ли как-то это реализовать?

• html
• css
• css3
• svg
• анимация

Квадрат или прямоугольник в svg это код внутри тегов <rect>. Поэтому именно этот тег нужно обернуть в теги ссылки. Они немного отличаются от тегов HTML

<a xlink:href="https://yandex.ru/">

Современные браузеры уже поддерживают ссылку в svg, как в html
<a> href="https://yandex.ru/">
но лучше пока воздержаться от этого, так как в safari это не работает.

При наведении на объект svg всплывает туллтип — подсказка. Это текст, который находится внутри тегов <title>

Ниже полный код для двух элементов SVG c разными ссылками на каждом из них.

<meta charset="utf-8">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 370 460" >  
 <a xlink:href="https://yandex.ru/" > 
 <title> ссылка на Yandex </title>
<rect x="50" y="50" rx="5%" fill="purple" />
</a>
<a xlink:href="https://google.ru/" > 
 <title> ссылка на Google </title>

<circle cx="180" cy="110" r="50" fill="dodgerblue" />
</svg>	 

В сниппете ссылки не работают из-за требований безопасности, но если вы скачаете файл и сохраните его в формате HTML,то ссылки будут рабочими.

1

Вариант с анимацией CSS ссылок

.google {
  fill: dodgerblue;
  transition: 1.5s;
}

.yandex {
  fill: purple;
  transition: 1.
  5s;
}

.yandex:hover,
.google:hover {
  fill: gold;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 370 460">  
 <a xlink:href="https://yandex.ru/" > 
 <title> ссылка на Yandex </title>
<rect x="50" y="50" rx="5%" />
</a>
<a xlink:href="https://google.ru/" > 
 <title> ссылка на Google </title>

<circle cx="180" cy="110" r="50" />
</svg>

обернуть изображение в тег <a href="ссылка"><img/></a>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Словарь терминов — Setup.

ru — бесплатный конструктор сайтов, создать сайт бесплатно

Свернуть Развернуть

• 9 февраля 2023

  Выпуск №341. Накрутка подписчиков в «Тик ток»

  Тик Ток – молодой видеохостинг, в котором даже рядовые интернет-пользователи могут реализовать практически любые креативные …

• 17 января 2023

  Выпуск №340. Накрутка подписчиков во «ВКонтакте»

  Накрутка подписчиков в социальной сети ВКонтакте относится к серым методам продвижения. С одной стороны она привлекает своей …

• 31 декабря 2022

  C Наступающим 2023 годом!

  Поздравляем вас с наступающим новым годом!

Главная Словарь терминов

В данном разделе мы постарались описать все термины, относящиеся к созданию сайтов в нашей системе. Если Вы заметили, что какого-то понятия не хватает — пишите нам на info@setup. ru

Алфавитный список

• А
• Б
• В
• Г
• Д
• Е
• Ё
• Ж
• З
• И
• Й
• К
• Л
• М
• Н
• О
• П
• Р
• С
• Т
• У
• Ф
• Х
• Ц
• Ч
• Ш
• Щ
• Ъ
• Ы
• Ь
• Э
• Ю
• Я

• A
• B
• C
• D
• E
• F
• G
• H
• I
• J
• K
• L
• M
• N
• O
• P
• Q
• R
• S
• T
• U
• V
• W
• X
• Y
• Z

Нет описания для термина «%d0%93%d1%80%d0%b0%d1%84%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b0%d1%8f%20%d0%b3%d0%b8%d0%bf%d0%b5%d1%80%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b0»

Доска почета

Константа — центр бухгалтерских услуг

konstantaorel. ru

или посмотреть видео о сервисе

html — Размещение ссылки под изображением

Задавать вопрос

спросил

1 год, 5 месяцев назад

Изменено 1 год, 5 месяцев назад

Просмотрено 1к раз

Я пытаюсь поместить ссылку под изображением, и по какой-то причине ссылка продолжает идти сбоку (справа) от изображения. Изображение отображается нормально, и ссылка работает, но мне просто нужно, чтобы она находилась под картинкой.

Есть идеи?

HTML:

 

  
  Тест

 

CSS:

 .изображения {
  положение: абсолютное;
  слева: 10 пикселей;
  верх: 200 пикселей;
  размер шрифта: 120%;
}
 

Я новичок в HTML/CSS, поэтому, если кто-нибудь может объяснить простыми словами, я был бы очень признателен.

Я пробовал много разных вещей, таких как span, align и т. Д., И это просто не сработает!

Если я использую оператор p вместо ULR (h ref), текст действительно идет под изображением, поэтому я сбит с толку!

• html
• css
• изображение
• текст
• выравнивание

1

Изображения по умолчанию являются встроенными элементами 8, хотя обрабатываются как встроенные блоки ). Все, что вам нужно сделать, это установить изображение как элемент уровня блока с помощью: img { display: block; }

 изображение {
  дисплей: блок;
} 

 <дел>
  
  Тест 
 

Вы можете использовать display flex, чтобы сделать это столбцом. Объяснение: https://www.w3schools.com/css/css3_flexbox_container.asp

 .images {
  положение: абсолютное;
  слева: 10 пикселей;
  верх: 200 пикселей;
  размер шрифта: 120%;
  дисплей: гибкий;
  flex-направление: столбец;
} 

 <дел>
   jpeg" alt="Внешний вид" />
  Тест 
 

1

Вы можете добавить тег линии разрыва под тегом изображения.

 <класс div = "изображения">



Тест