Как сделать кликабельную картинку

кликабельная картинка

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

Недавно, мы с подругой занялись созданием группы Вконтакте, нам для работы надо было. И она меня спросила: «Диан, а как сделать кликабельную картинку в группе?». Ребят, отвечаю, кликабельную картинку Вконтакте сделать, увы, нельзя...Но, в самой группе, в ее менюшке можно сделать картинку или несколько кнопок кликабельными. Я вам расскажу про оба варианта: про менюшку в группе и про картинки для наших блогов, или форумов, ну или куда вам хочется.

1. Как сделать кликабельную картинку Вконтакте, в группе.
Все, до безобразия, просто. =)

Для начала, заходим в раздел Управление сообществом и в пункте Материалы выбираем – ограниченные. Далее загружаем в фотографии группы нашу, заранее заготовленную, кнопочку. Не берите скучные, однообразные кнопки, в виде простого серого прямоугольника. Для примера я взяла милого жирафика, как вы уже, наверное, заметили, я не люблю скучные картинки. =)
Блог Дианы
Дальше в меню группы жмем на «Свежие новости» и редактировать.

кликабельная картинка
Редактируем название, я напишу «Читайте нас тут». Жмем, как показано на картинке, то есть, убираем визуальный редактор. Я предложу два варианта кода, сами потом выберете, что для вас интереснее покажется.

кликабельная картинка

[[photo-60783583_313930380|;nopadding|http://vk.com/bloggingdi]]

[[photo-60783583_313930380]] [http://vk.com/bloggingdi|Группа блога]

60783583_313930380 – тут будут координаты вашей кнопочки, смотрим картинку, какую часть в ссылке надо будет скопировать и вставить в код.

кликабельная картинка
http://vk.com/bloggingdi — вместо этой ссылки будет ваша, куда будет перебрасывать читателя по нажатию на кнопочку.

Группа блога – это собственно имя кнопочки, или пояснение к ссылке.

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

как сделать кликабельную картинку

В первом случае, сама картинка будет кликабельной, во втором случае надо будет нажимать на «Группа блога», чтобы перекинуло, куда нам необходимо. Группу я специально не буду удалять, можете перейти в нее и попробовать понажимать на кнопочки сами, поглядите, как это работает.

2. Как сделать кликабельную картинку для блога, форума и т.д.
Тут еще легче, чем в первом пункте. Вообще, я не люблю блоги без картинок, глаза читателя должны цепляться за что-то прикольное, необычное, веселенькое, у каждого из нас в душе сидит ребенок, который любит все красивое. =)

А если ваш блог серый и скучный, статьи только текстом, без картинок (хотя бы одной), то это нагоняет тоску. Поэтому, приображайте и освежайте свой блог. =)

Вообще, для чего нужны кликабельные картинки? Допустим, вы рекламируете свою туже группу, и пишете ее просто в виде ссылки, согласитесь, это будет не очень красиво? Можно, конечно же, ссылку прятать в слова, а точнее даже нужно. Но, иногда мы хотим, чтобы наша ссылка цепляла, тем более, если вы что-то рекламируете, какой-то качественный продукт или проект.
Давайте я вам покажу, как это сделать. Всего лишь надо будет использовать вот это код:

<a href=" ссылка на нужную страничку"><img src="ссылка на картинку"/></a>

У меня получился вот такой код:

<a href="http://vk.com/bloggingdi"><img src="http://s005.radikal.ru/i211/1311/d9/854f4b79fd05.gif"/></a>

И вот такая картинка, кликайте по ней и проверяйте, должно перебросить на группу блога.


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

На этом все, думаю, теперь всем стало понятно, как сделать кликабельную картинку. Фантазируйте, творите и все у вас получится! До встречи в следующих статьях. =)

Новость дня: в конкурсе у Александра Борисова, «Лучший блог по мнению isif-life.ru» мой бложек занял 9 место из 49 блогов. Думаю, для новичка, это неплохой результат, ошибки мне мои сообщили, я их уже исправила практически. Спасибо Саше за конкурс и спасибо судьям за оценки, меня эта новость очень подбодрила.)

Не забудь подписаться, чтобы не пропустить следующую статью! ;)

С уважением, Соболева Диана.

стрелочка

Читайте также:

8 комментариев к записи Как сделать кликабельную картинку

  1. Натала:

    Диана еще раз поздравляю и вопрос по теме: адрес картинки откуда-то из интернета? Можно брать любое понравившееся фото и ставить на него ссылку? И так можно все фото чужие и еще экономия на хостинге. Или я не правильно поняла? Спасибо.

    • Спасибо, Натал! Смотри, если я беру готовую картинку из яндекса, то там уже есть ссылки, так ведь? А когда я сама рисую, корректирую картинку под себя, то я ее заливаю на сервис radikal.cc, оттуда уже не только ссылку можно брать, но и готовый HTML код. Единственное, на этом сервисе дополна рекламы, но я им уже несколько лет пользуюсь. :x

  2. Ирина Раковец:

    Картинки должны присутствовать на блоге обязательно. Иначе, как правильно Вы написали, становится скучно читать сплошной текст. Да и картинка-ссылка намного привлекательнее, чем просто ссылка :x

  3. Гуля:

    Я думала,что делать кнопки в группе это тяжело,оказалось легко даже очень. Спасибо за пояснения,Диана. :smile:

  4. Александр:

    Совсем недавно хотел сделать кнопку на сайте «Узнать больше». Однако не было времени искать информацию и я сделал просто текстовую ссылку. Ну теперь у меня с этим проблем не возникнет. Все оказывается просто до невозможности. Спасибо за толковую статью.

    • Рада помочь, Александр.) Просто несколько раз меня об этом спрашивали, я решила все же написать статью, чтобы можно было вернуться и глянуть как это делается, если вдруг забудется.)

  5. Сергей:

    Присоединяюсь. тоже попробую :mrgreen:

Оставить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: