html картинка ссылка

Как обернуть картинку в ссылку

В сегодняшнем уроке я отвечу на вопрос одного из моих подписчиков на Youtube канале. Он захотел сделать кликабельную картинку, чтобы при нажатии на неё осуществлялся звонок по указанному номеру телефона и самостоятельно не смог разобраться как это делается. Поэтому я и подготовил уже готовый код HTML и подробное объяснение, как обернуть картинку в ссылку и сделать эту ссылку номером телефона.

HTML звонок по клику

<a href="tel:номер_телефона"><img title="текст_title" alt="текст_alt" src="/путь_к_картинке" width="ширина" height="высота"></a>

здесь,

  • номер_телефона – это номер телефона по которому будет осуществлён звонок, если пользователь нажмёт на картинку;
  • текст_title – текст, который увидит пользователь, если наведёт курсор мыши на картинку;
  • текст_alt – текст, который увидит пользователь, если браузер по какой-либо причине не сможет отобразить картинку;
  • путь_к_картинке – указываем путь, где находится картинка, которую нужно отобразить пользователю в браузере;
  • ширина – ширина отображаемой картинки в пикселях;
  • высота – высота отображаемой картинки в пикселях.

Готовый пример кода

<a href="tel:+380501111111"><img title="Позвонить" alt="Позвонить на номер +380501111111" src="/tel.png" width="200" height="200"></a>

Видео для наглядного пояснения урока

Main Menu