Меню

HTML: Как сделать картинку ссылкой

Тег <img>

Вы наверное не раз замечали, что на многих сайтах в качестве ссылок используются различные картинки, которые по принципу работы ничем не отличаются от текстовых ссылок. Для того чтобы заменить обычную текстовую ссылку на изображение, нужно внутрь элемента <a> поместить тег <img>, который указывает путь к изображению:


<html>
  <body>

    <p>Посетите наш сайт, кликнув по картинке:
      <a href="httрs://dino.am">
        <img src="logo.png" alt="ссылка" width="100" height="78">
      </a>
    </p>

  </body>
</html>
Попробовать »

Убираем рамку

При использовании изображений в качестве ссылок браузеры автоматически будут добавлять к ним рамку, которая легко убирается с помощью CSS свойства border со значением none.

Чтобы убрать рамку у картинки ссылки, можно прописать свойство border в атрибут style:


<a href="httрs://dino.am">
  <img src="logo.png" style="border: none;">
</a>

Этот способ подойдёт когда картинка ссылка всего одна. Но если у вас много таких ссылок, то лучше прописать стиль сразу ко всем картинкам, которые вложены в тег <a>, сделать это можно так:


a img { border: none; }

Просто добавьте этот код к остальным стилям и он уберёт рамки у всех картинок, являющихся ссылками.