-Рубрики

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 13.03.2010
Записей: 1019
Комментариев: 13563
Написано: 19154

Отчеты:



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

Среда, 10 Апреля 2013 г. 23:28

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

1. Первый способ для картинок, которые загружены на фотохостинг  


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


Для этого  нужно загрузить картинку  на  любой фотохостинг и и взять ссылку   т.е адрес картинки.

http://fotki.yandex.ru/   .  http://radikal.cc/)

Адрес ссылки это страница, которая будет открываться при нажатии на картинку или баннер.   (Яндекс - фотки - ссылка №3 , Радикал- фото - ссылка №1)

3726295_20130410_203939 (700x190, 45Kb)

Скопируйте код в блокнот на ПК и внимательно вставьте адреса ссылки и картинки(не перепутайте)  

3726295_20130410_203250 (700x147, 38Kb)

Вставьте  в сообщение в расширенном редакторе при нажатии на ИСТОЧНИК

3726295_20130410_203417 (700x153, 23Kb)

Отправьте сообщение в ПРЕДПРОСМОТР или ЧЕРНОВИК и проверьте результат на кликабельность. Я. например,  провожу все манипуляции с картинкой в ЧЕРНОВИКЕ,а затем каждый  раз беру готовый код картинки из черновика и вставляю в сообщение.

2. Подготовка кода для  кликабельной картинки в Радикал-фото.

Этот метод очень удобен для вставки кликабельной картинки в эпиграф дневника, в приложение "Всегда под рукой" или в блок "О себе"

  • Загружаем картинку на фотохостинг
  •  В последней графе удаляем ссылку на фотохостинг и прописываем свою ссылку на страницу перехода. Щелкаем по  ПЕРЕХОД НА URL ( при этом в ссылках должно произойти изменение т.е замена на вашу ссылку)  В результате получаем готовый код №2 или №6. 

3726295_20130411_215940 (700x394, 90Kb)

Чем отличается ссылка №2 от ссылки №6 . 

Они выполняют одинаковую функцию, но имеют разный вид в редакторе.  Важно! Код №6 вставляется в при нажатии на кнопку "Источник"

3726295_20130419_195703_1_ (627x231, 38Kb)

Для примера  взяла  картинку  и сделала ее ссылкой на собственные фоны klavdia-France , которые мне очень понравились .Кликните по  картинке!

 

3. Третий способ - создание кликабельной картинки в тексте сообщения 

 Этот способ применяется для создания картинки-ссылки в тексте сообщения.  Рекомендую загружать изображения  в  расширенный(визуальный) редактор напрямую из ПК  Как говорят опытные пользователи: "На фотохостинг надейся,а сам не плошай!" Загрузив картинку  из ПК в редактор, с  помощью простых манипуляций можно сделать любую картинку не только кликабельной,  но  и со всплывающим текстом  при наведении на картинку.   Для этого жмем на иконку ИЗОБРАЖЕНИЕ и загружаем картинку из ПК. Когда картинка загрузится переходим на вкладку ССЫЛКА 

3726295_20130410_222342 (505x466, 57Kb)

В выпавшем окне в графе URL вписываем  ссылку на страницу перехода

3726295_20130410_222642 (448x189, 34Kb)

Далее переходим на вкладку РАСШИРЕННЫЙ и в графе ЗАГОЛОВОК  пишем всплывающий текст.

3726295_20130410_223044 (502x299, 42Kb)

Жмем ОК и любуемся результатом . 

3726295_ (352x491, 34Kb)

 

4. Самый простой способ создания кликабельной картинки в расширенном редакторе

Загрузите картинку в редактор, через кнопку "Изображение"

3726295_99617934_3726295_20120521_142229 (237x117, 65Kb)

Выделите картинку мышкой и жмите на кнопку  "Вставить /редактировать ссылку" .  В выпавшем окне в графу URL вставьте ссылку на страницу перехода. Вот и все! Баннер готов!  Как видите, любую даже уже загруженную ранее картинку можно сделать кликабельной. Здесь, как и в предыдущем способе можно перейти на вкладку РАСШИРЕННЫЙ и в графе ЗАГОЛОВОК  написать  всплывающий текст в качестве подсказки. При наведении курсора на картинку появится текст - подсказка

3726295_20131116_101038 (394x455, 52Kb)

 Читайте пост:  Как создать кнопку-переход 

Все самые популярные коды здесь:  Коды для оформления блога

P.S. Для желающих работать с кодом, для кликабельной картинки со всплывающим текстом, даю код ,только не забудьте вместо width=100 height=100  вставить размеры картинки, где width-ширина, а height - высота картинки 


<a href="Адрес страницы, на которую будет указывать баннер" target=_blank><img src="Адрес картинки из Интернета или из Радикала (ссылка№1)" border="0" title="Текст, видимый, в качестве подсказки, при наведении на ссылку." width=100 height=100></a>

3726295_0586d8d05e60 (499x3, 0Kb)

Читайте пост: Как создать  ссылки в расширенном редакторе дневника.

Серия сообщений " Оформление дневника ":
Часть 1 - Как создать кнопку-переход
Часть 2 - 7 причин по которым не стоит вставлять в комментарии картинки
...
Часть 22 - Добавление к предыдущему посту .Как изменить размер плеера
Часть 23 - Как сжать размер картинки (фона) до требуемой величины для загрузки в дневник.
Часть 24 - Как создать кликабельную картинку или кнопку-переход в редакторе
Часть 25 - Почему пропадают картинки и фотки?
Часть 26 - Украшаем дневник! Как применить и управлять схемами
...
Часть 32 - Все коды для оформления дневника в одном месте
Часть 33 - Еще один способ создания и вставки музыкального плеера в сообщение дневника.
Часть 34 - Все варианты создания и вставки плеера в текст сообщения или в рамку с кодом

Серия сообщений "Для новичков ЛИ.РУ.":
Часть 1 - Для самых начинающих лирушников.
Часть 2 - С чего начинать дневник?
...
Часть 30 - Как вставить плеер, плейлист и картинку в рамку с кодом(2)
Часть 31 - Урок для самых новеньких! Как загрузить картинку для фона дневника
Часть 32 - Как создать кликабельную картинку или кнопку-переход в редакторе
Часть 33 - Урок по использованию рамочек от Летиция
Часть 34 - Как добавить рубрику прямо из редактора при цитировании поста
...
Часть 44 - Как вставить плеер с сервиса ПростоПлеер (по просьбе ПЧ)
Часть 45 - Наводим порядок в дневнике!Как разложить все сообщения в дневнике по полочкам и другие самые важные рекомендации для новичков!
Часть 46 - Уроки для новичков Лиру.

Метки:  

Процитировано 270 раз
Понравилось: 87 пользователям



Elina750   обратиться по имени Среда, 10 Апреля 2013 г. 23:50 (ссылка)
Спасибо за полезный сей рассказ!
Он очень нужен! В самый раз!!!

Картинка
Ответить С цитатой В цитатник
Перейти к дневнику

Сеё не выразишь словами

Пятница, 12 Апреля 2013 г. 01:54ссылка
Стихами мы ответить вправе -
Сеё не выразишь словами...
Картинки, право - Баннерами
Кликабельными стали.

Картинка - не ссылка!
Картинка
Перейти к дневнику

Пятница, 12 Апреля 2013 г. 02:57ссылка
Ура! Ура! Склоняюсь перед Вами -
Вы первый, кто ответил мне стихами!

Люблю я это дело, право слово -
Я рифмоплётствовать всегда готова!
Картинка
Перейти к дневнику

Понедельник, 21 Октября 2013 г. 17:21ссылка
Все советы попробовала а кликабельной"картинки" не получается как у вас в коменте,разжуйте,если не трудно
RiaArei   обратиться по имени Среда, 10 Апреля 2013 г. 23:53 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
LudmelaRU   обратиться по имени Четверг, 11 Апреля 2013 г. 01:40 (ссылка)
Спасибо дорогая! Очень интересно!
Ответить С цитатой В цитатник
ДарьяС   обратиться по имени Четверг, 11 Апреля 2013 г. 02:06 (ссылка)
Спасибо за урок!
Ответить С цитатой В цитатник
Сплетня   обратиться по имени Четверг, 11 Апреля 2013 г. 04:06 (ссылка)
на самой первой картинке справа вверху есть "переход на URL", там же можно сразу указать нужный адрес и взять готовый код :)
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 11 Апреля 2013 г. 22:18ссылка
pospletnichaem, Огромное спасибо за подсказку.
Перейти к дневнику

Четверг, 11 Апреля 2013 г. 23:47ссылка
да не за что :)

*у Вас отключена возможность отправлять симпочки :(
Перейти к дневнику

Понедельник, 21 Октября 2013 г. 18:26ссылка
по вашему совету вот что получилось по коду 2 //s020.radikal.ru/i713/1310/6c/168bdc1619c1.gif,хотелось бы чтобы в коменте ставилось"картинка"...
Перейти к дневнику

Вторник, 22 Октября 2013 г. 21:28ссылка
Сизарка, Для того, чтобы вставить картинку в комментарий перейдите по ссылке "Перейти к полной форме", выберите файл с компьютера и публикуйте. Если пользователь НЕ отключил опцию "показывать картинки в комментариях", то в комментариях Вы увидите полное изображение картинки, если же показ картинок отключен, то вместо картинки Вы увидите ссылку на картинку "Картинка" .Картинки в таком случае отображаются только для друзей .

Как найти опцию? Настройки---старое оформление---основные настройки ( я привыкла к старым настройкам)
2013-10-22_210333 (700x96, 29Kb)
Selena-13-amazonka   обратиться по имени Четверг, 11 Апреля 2013 г. 20:41 (ссылка)
Спасибо за полезную информацию !!!
Ответить С цитатой В цитатник
Бузок_цветик   обратиться по имени Четверг, 11 Апреля 2013 г. 22:50 (ссылка)
Спасибо за урок.
Ответить С цитатой В цитатник
Nelya_Gerbekova   обратиться по имени Пятница, 12 Апреля 2013 г. 08:39 (ссылка)
Elina750, Браво!!!!
50421782_4a52e0231388d7fd00a78caff6aa57fb (115x115, 15Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 12 Апреля 2013 г. 09:09ссылка
Спасибо! Присоединяйтесь!!!
Давайте вместе! Попытайтесь!!!
Прошу Вас, только не стесняйтесь!!!
ФираЯ   обратиться по имени Воскресенье, 26 Мая 2013 г. 21:11 (ссылка)
От всей души благодарю за столь нужную мне информацию! С удовольствием забираю к себе.
Ответить С цитатой В цитатник
egmara   обратиться по имени Вторник, 27 Августа 2013 г. 14:27 (ссылка)
Nelya_Gerbekova, С благодарностью!:angel:
Ответить С цитатой В цитатник
Лариса_Виноградова   обратиться по имени Среда, 06 Ноября 2013 г. 22:07 (ссылка)
Спасибо огромное,кое-чему уже научилась,уроки очень доступные!!!!!!!
Ответить С цитатой В цитатник
Grateful   обратиться по имени Воскресенье, 17 Ноября 2013 г. 00:43 (ссылка)
Отличный урок, все получилось, спасибо!
Ответить С цитатой В цитатник
Концевич   обратиться по имени Среда, 08 Января 2014 г. 09:46 (ссылка)
Спасибо большое за Ваши уроки.С Вашей помощья, я смогла сделать кликабельную кнопку.


Ответить С цитатой В цитатник
Журавленок   обратиться по имени Воскресенье, 12 Января 2014 г. 01:42 (ссылка)
Благодарю за полезную информацию,будем разбираться.
Ответить С цитатой В цитатник
Надежда_Заломина   обратиться по имени Воскресенье, 16 Февраля 2014 г. 13:18 (ссылка)
Спасибо большое.
Ответить С цитатой В цитатник
ПУШИСТЫЙ__КОТЁНОК   обратиться по имени Вторник, 24 Июня 2014 г. 05:32 (ссылка)
Спасибо за урок!
Ответить С цитатой В цитатник
Нинуля_Смолина   обратиться по имени Среда, 31 Декабря 2014 г. 05:21 (ссылка)
Спасибо Нелля за урок ... С новым годом !!!!
Ответить С цитатой В цитатник
Нинуля_Смолина   обратиться по имени Воскресенье, 01 Февраля 2015 г. 17:54 (ссылка)
Нелля,куда то затерялся пост....цитирую еще раз ...Спасибо-все получилось !
Ответить С цитатой В цитатник
dekab12rina   обратиться по имени Понедельник, 09 Февраля 2015 г. 14:17 (ссылка)
Nelya_Gerbekova, ух, как интересно. Спасибо. Цитирую.
Ответить С цитатой В цитатник
MARIYA-VIKTORIYA   обратиться по имени Четверг, 19 Февраля 2015 г. 02:11 (ссылка)
Ответить С цитатой В цитатник
Васточка   обратиться по имени Суббота, 21 Февраля 2015 г. 00:58 (ссылка)
спасибо за науку
Ответить С цитатой В цитатник
Verik19803105   обратиться по имени Пятница, 06 Марта 2015 г. 10:42 (ссылка)
ничего не понимаю ,голова кругом, куда вставить этот код ?
как-то все поверхносно объясняют, а самый главный шаг "КУДА" не понятен...
вот вставляю его сюда в сообщение....
Картинка
Ответить С цитатой В цитатник
Verik19803105   обратиться по имени Пятница, 06 Марта 2015 г. 12:44 (ссылка)
А каким редактором Вы пользуетесь ? :)
Ответить С цитатой В цитатник
Перейти к дневнику

Суббота, 07 Марта 2015 г. 20:29ссылка
Verik19803105,Пользуюсь только расширенным CKEditor
Verik19803105   обратиться по имени Воскресенье, 08 Марта 2015 г. 06:08 (ссылка)
Спасибо огромное!!!
Нашёл оф. сайт с установкой CKEditor,
только вот модуль для него не могу скачать ,ну просто не понимаю ГДЕ эта кнопочка Download...:(
хотелось бы по Вашим подсказкам пользоваться теми же инструментами.........
Попробую онлайном :
http://filyanin.ru/8-vizualnyy-HTML-onlayn-redaktor.html
У меня на своём сайте и тут без проблем, на другом проекте не получается переход на сторонние сайты через кликтабельность....
Ответить С цитатой В цитатник
Ванина_мама   обратиться по имени Среда, 02 Декабря 2015 г. 07:05 (ссылка)
Спасибо за урок!! Пока это всё ,,китайская грамота,, Буду разбираться. ))))
Ответить С цитатой В цитатник
Галина_Гражданова   обратиться по имени Воскресенье, 06 Марта 2016 г. 19:32 (ссылка)
Спасибо огромное!
Ответить С цитатой В цитатник
marinapetrova1950   обратиться по имени Вторник, 30 Августа 2016 г. 23:32 (ссылка)
Большое спасибо!
Ответить С цитатой В цитатник
leka312   обратиться по имени Среда, 25 Января 2017 г. 19:56 (ссылка)
благодарю!!!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] 2 [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку



По всем вопросам: info@nelyager.ru
О проекте
  • Версия для PDA
  • Контакты
  • Разместить рекламу