Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML Коды языков

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

Тег <img>

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

<html>
  <body>

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

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

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

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

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

<a href="httр://www.puzzleweb.ru">
  <img src="logo.png" style="border: none;">
</a>

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

a img { border: none; }

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

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen