Главная » Создание сайта, раскрутка сайта

Как добавить картинку через CSS и сделать её ссылкой?

как добавить картинку через css

Делаем картинку, добавленную через CSS, ссылкой

В данной статье мы рассмотрим то, каким образом можно добавить в дизайн своего сайта картинку средствами CSS и сделать картинку кликабельной, то есть поставить на нее ссылку. Для начала я хотел бы Вам показать как легко и просто можно добавить картинку и сделать её ссылкой. Для этого мы используем средства HTML:

<a href="about-windows.ru"><img scr="/image.png"></a>

Как видите, тут мы даже не задействуем CSS. Здесь представлен чистый HTML. Добавление картинки средствами CSS может быть актуальным, например, при использовании CSS спрайтов на Вашем сайте. Про CSS спрайты я напишу чуть позже. А теперь мы перейдем непосредственно к нашей теме.

Как средствами CSS добавить картинку в дизайн сайта?

.logo {
 top:0;
 display:block;
 text-align: left;
 float: left;
 margin-right: 48px;
 width: 114px;
 height: 59px;
 background: url(/img/logo.png) no-repeat;

Здесь представлен стандартный класс CSS для определенного элемента. В нашем случае данный класс определяет расположение логотипа сайта. Я не буду глубоко впадать в знакомство с CSS, по нескольким причинам:

  1. Я не больно хорошо знаю CSS.
  2. Редактирование файлов CSS достаточно не сложное занятие, так как все поля достаточно красноречиво говорят о своей функциональности.
  3. Эта статья не предназначена для верстальщиков(тем более это они знают на зубок). Статья представлена для владельцев сайтов, которые используют общедоступные CMS и иногда влезают в него для внесения несущественных изменений, а про редактирование файлов CSS можете почитать во 2-ом пункте.

Надеюсь представленный мною вариант довольно отчетливо даёт понять как необходимо добавлять картинку в дизайн сайта. Уточню только пару моментов:

  1. Класс logo должен быть описан в файле формата.css.
  2. Данный файл должен быть загружен страницей. Для этого можно использовать следующий код:
    <link type="text/css" rel="StyleSheet" href="about-windows.ru/style.css" />

    Можете почитать подробнее про способы внедрения css-стиля в HTML-код страницы.

  3. logo.png — это то самое изображение, которое мы хотим добавить в дизайн нашего сайта. Поэтому сориентируйтесь и измените путь так, как Вам нужно.

Как сделать изображение ссылкой?

Мы напрямую подошли к главному моменту данной темы. Теперь у нас уже есть необходимый нам css класс, в котором загружается необходимое нам изображение. К сожалению средствами CSS нельзя добавить ссылку для изображения, это прерогатива HTML. А это значит что в коде страницы мы должны добавить следующий код:

<div class="logo">
<a style="height:100%; display:block;" href="about-windows.ru"></a>
</div>

Что тут нужно отметить несколько моментов:

  1. Мы в блоке div подключаем CSS класс, в котором указано месторасположение картинки и сама картинка.
  2. Далее идет стандартная ссылка:
    <a href="ссылка">Анкор ссылки</a>
  3. Как Вы можете заметить, у нас нет анкора ссылки. Анкор ссылки — это текст, под которой скрыта ссылка. Его отсутствие это нормально.
  4. И самый важный момент состоит в добавлении необходимого стиля для ссылки, чтобы для перехода по ссылке можно было бы нажать на всю ширину картинки.

Вот такими несложными действиями можно добавить картинку средствами CSS, а потом навесить на неё ссылку, уже средствами HTML.

5 комментариев к записи “Как добавить картинку через CSS и сделать её ссылкой?
  1. Алексей в cказал :

    Огромное спасибо долго искал, и вот нашёл!

  2. Павел в cказал :

    Спасибо, очень помогли! :)

  3. otzyv в cказал :

    Подскажите, пожалуйста! Если страница находится в папке на рабочем столе, а картинка в изображениях в Моих документах, то как задать такой путь, чтобы сделать картинку фоном, например??

    • admin в cказал :

      Если находится на компе, то и все остальное должно лежать в внутри этой корневой папки.

  4. Влад в cказал :

    просто здорово!

Добавить комментарий

Ваш комментарий появится после модерации.