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; }
Просто добавьте этот код к остальным стилям и он уберёт рамки у всех картинок, являющихся ссылками.
С этой темой смотрят: