Как картинку сделать ссылкой
Rate this post

Приветствую друзья, лично у меня за окном солнышко светит и от этого не охота вообще ничего делать, а есть желание пойти на улицу и прогуляться по парку. Но я посидел и подумал, что более целесообразно будет написать статью, которую я давно хотел написать, а потом уже пойти и нормально погулять без каких-либо думок. Как говорится — «Сделал дело, гуляй смело».

Сегодня речь пойдет о том, как картинку сделать ссылкой. Я в этой статье постараюсь подробно описать эту процедуру, поверье ничего сложного в этом нет…

Но для начала хочу поделиться двумя небольшими радостями, которые случились в моей жизни.

Во первых я участвовал в соревнованиях по шахматам у себя в городе, в котором занял достойное третье место. За третье место приз оказался более чем нормальным — «домашний кинотеатр». Поэтому думаю что не зря старался выиграть призовое место в проводимом конкурсе.

Хочу отметить, что и в прошлом году я участвовал в этих же соревнованиях, где также занял третье место, но в прошлом году за призовое место я получил хорошенький цифровой фотоаппарат.

Теперь я принципиально хочу подготовиться к соревнованиям, чтобы на следующий год взять первое место, так как на последнем турнире я понял, что это вполне достижимо. Теперь я знаю своих соперников в лицо)))

Да кстати я заметил, что с каждым годом я играю все лучше и внимательнее в шахматы.

Вторая новость, я полностью купил себе новый компьютер, и эта первая статья, которая написана на новом компе.

В общем комп мощный очень даже, и мой предыдущий  компьютер уступает ему по всем параметрам ровно в 8 раз.

А раньше мой старый компьютер казался для меня с очень хорошими характеристиками.

Компьютер я купил для полноценного ведения своего блога, теперь я надеюсь буду Вас радовать новыми статьями, фишками и уже теперь виеоуроками и видеокурсами.

Ну в общем это все с чем я хотел поделиться сегодня!

И так, давайте перейдем к теме…

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

Существует несколько вероятных ситуаций когда, картинку нужно делать ссылкой. Обычно ссылки в картинках оставляются на сайтах, блогах а также, картинки можно вставлять в разных форумах и других веб сайтах.  Также, блогеры и вебмастера ставят ссылки у себя на сайте в картинки, для того, чтобы ссылка на другую страницу казалась бы более привлекательно. Каждый случай мы обсудим отдельно.

В первую очередь мы разберем то, как картинку сделать ссылкой на своем сайте, это делается очень просто, достаточно прописать определенный HTML-код.

Вот он:

<a href=»адрес ссылки» ><img src=»адрес картинки» ></a>

Как Вы наверное поняли, что код состоит из двух составляющих. Первая часть, включает в себя ссылку на которую будет вести картинка, а вторая часть выводит саму картинку.

Теперь можно будет выровнять эту картинку по центру, по левому или по правому краю. Все это тоже делается при помощи добавления  в код, дополнительных составляющих.

Вот к примеру, если Вы хотите разместить картинку по центру, код картинки с ссылкой будет выглядеть вот так:

  <p style=»text-align: center;»><a href=»адрес ссылки» ><img src=»адрес картинки» ></a><p>

В общем, из этого Вы должны понять, что если Вы хотите, чем то еще дополнить картинку (размер, расположение и т.д.) просто добавляете нужную команду для этого. Чтобы знать эти команды, рекомендую скачать какой-нибудь учебник по HTML. Можно же, все редактировать в каком-нибудь визуально редакторе, а потом скопировать весь этот код в нужное Вам место. Я так часто делаю, чтобы не заморачиваться.

Таким способом, можно делать гиперссылку в картинке  везде, где поддерживается HTML код.

Ну что же друзья, теперь Вы знаете как картинку сделать ссылкой! Надеюсь информация оказалась для Вас полезной!

Но у меня на сегодня все, до новых встреч в новых статьях!

С уважением, Сергей Иванов

38 Replies to “Как картинку сделать ссылкой”

  1. Артём Черкасов

    Отличная статья для не знающих ????

    Reply
    1. Ирина

      Незнающие и то бывают разные: одни вообще не представляют, что картинки можно сделать ссылками, а другие — уже используют картинки-ссылки, но не разбираются в кодах.

      Reply
      1. Юрий Йосифович

        Не обьязательно быть шеф поваром, чтобы зажарить яичницу. Именно так нужно смотреть и на создание сайта, верстку кода. Статья очень даже правильная — я хоть и программист, но все же не стыжусь использовать справочники и готовые библиотеки кода.

        Reply
  2. Сергей

    Все же, надо было тебе полностью код выложить со всеми командами. Так легче и быстрее читателю будет. Не надо лишний раз ему лазить в редактор, прописывать и копировать код.

    Reply
    1. Юрий Йосифович

      Читателю и так довольно просто читать данную статью — тем более что просто и понятно описано и выделено цветом код, который отвечает именно за картинку.
      А вот со всеми командами — безтолку, так как команды у каждого могут быть разными.

      Reply
  3. Елена

    Андрей, поздравляю с победой в шахматном турнире! Действительно достойные призы в вашем городе. Мой муж тоже шахматист, занимает первые места в городе и районе, но призы смешные ))

    Спасибо за информацию в статье!

    Reply
    1. Сергей Иванов

      Спасибо за поздравление!

      Reply
    2. Елена

      Присоединяюсь к Елене. Примите мои поздравления, Андрей! Занять третье место в шахматном турнире — это достойно уважения. Да и призы весьма увесистые. Есть за что побороться.

      Reply
      1. София

        И я спешу поздравить Вас с победой! В следующий раз место будет первым!

        Reply
        1. Сергей Иванов

          Спасибо Вам большое за поздравления! Очень приятно.

          Reply
    3. Ирина

      А я бы о призах меньше говорила. У меня человек, играющий в шахматы просто вызывает уважение.

      Reply
      1. Елена

        Это точно. Шахматы — дело не простое… Я если и выигрывала когда-то, то только случайно…

        Reply
  4. Елена

    А я картинки через редактор Вордпресс добавляю. Даже не интересовалась никогда ,как это выглядит в HTML-коде…

    Reply
    1. София

      И я так делаю. Знаний пока маловато. Если что посерьезней нужно сделать , на помощь приходит сын. Он с компьютером на «Ты». А я ещё только учусь))

      Reply
      1. Сергей Иванов

        Иногда в сайтбаре это нужно сделать

        Reply
        1. Ольга Журбенко

          Для сайт бара тоже можно через редактор сделать код. В редакторе вставляешь картинку, копируешь код и вставляешь куда надо.

          Reply
          1. Елена

            Так я и делаю. Все очень просто. Но коды все равно было бы неплохо изучить.

          2. Ольга Журбенко

            Знать основы HTML — это необходимость для каждого блоггера. Ситуации бывают разные

          3. Ирина

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

          4. Елена

            Если бы я сначала пыталась изучить HTML, то так до сегодняшнего дня блога у меня бы и не было…

        2. София

          О, извините за неопытность. А сайтбар это что?

          Reply
          1. Сергей Иванов

            Боковая колонка блога, это может быть и нижняя часть блога

          2. Юрий Йосифович

            Ничего себе, так вы только 5 мая узнали что такое сайдбар? Я думал, что такой активный комментатор об этом должен бы знать уже давно…

  5. Ольга Журбенко

    Андрей, Ваша жизнь прямо насыщена событиями. И шахматный турнир, и новый компьютер. Просто супер!! Поздравляю с победой на турнире. Третье место —отличный результат.

    Reply
    1. Сергей Иванов

      Спасибо Оля, а где все это время пропадали?

      Reply
  6. Юрий Йосифович

    Андрей, к статье я бы добавил еще и то, что картинки лучше заключать в теги div а не p. Разница в том, что тег p по умолчанию является инлайновым элементом, а именно для блочного элемента (которым является div) можно задавать отступы (паддинги, магжины) и самое главное позиционирование самого элемента.
    Что это дает — а дает это то, что во первых задав свойство overflow:hidden мы с легкостью скрываем то, что не поместилось в блок — а значит дизайн не будет сьезжать при масштабировании или когда картинка внутри будет слишком большого размера. Это очень актуально при создании адаптивных дизайнов (в частности в статьях которые размещаются в адаптивных дизайнах).
    Кроме этого имея отступы мы можем задавать разные красивые рамочки и тени (как например граватары у Вас в блоках комментариев).

    Reply
    1. Zindows

      Оу-оу. Как все сложно, сколько тонкостей и ньюfнсов. Прям захочешь вникнуть и голова взорвется. (Стыдно говорить это мне — учителю информатики ???? )

      Reply
      1. Юрий Йосифович

        Да, действительно, учитель информатики должен бы знать чуть больше, чем я.

        Reply
  7. Zindows

    Оу, шахматист — это очень почетно! Свидетельствует о вас, как о человеке с умом, не лишенным логики!

    А призы очень достойные, редко услышишь о таких в подобных соревнованиях. У нас в городе дают максимум завалявшуюся на полках книжного магазина книженцию.

    Reply
    1. Юрий Йосифович

      А вы с какого города? Знания это сила — а значит они дарят не такие уж и плохие вещи. Главное не забросить подаренную книгу, а прочитать её!

      Reply
      1. Zindows

        Воронеж. Я как-нибудь покопаюсь на полке и скину названия подаренных книг.Тогда станет понятно, что не каждая книга есть знание)))

        Reply
        1. Юрий Йосифович

          Та книга, которую не поленились прочитать — знания, а остальное — подставка под кофе.

          В Воронеже не бывал, хотя все же планирую — очень уж много о нем люди рассказывают, особенно по ТВ.

          Reply
  8. Рашида

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

    Да и мои поздравления, с победой в турнире и особенно с покупкой компьютера.

    Reply
    1. Юрий Йосифович

      Конечно поймет, если просто хотя бы прочитает внимательно публикацию — обычно в наше время все статьи новички читают по диагонали.

      Reply
  9. Иван Зелинский

    Я на wordpress_е делал так, ибо отображение картинки в браузере сильно зависит от версии и вида браузера. В IE, например, созданные как картинки будут отображаться вокруг с рамкой, шириной 3 пикселя и с цветом, совпадающим с цветом ссылок. Хоть такой эффект рамок наблюдается не во всех браузерах, тогда в html-код добавим атрибут border=0. Вот как это будет выглядеть

    Это простой способ, чтобы сделать картинку ссылкой. Есть более сложный — разбить картинку на области прямоугольной или овальной формы, где каждая область — ссылка на какую-то страницу.

    Reply
  10. Иван Зелинский

    защита схавала пример

    //

    Reply
  11. Иван Зелинский

    img border=0 src=адрес картинки

    Reply

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *