-Метки

aleo flash intro banner maker artwaver engelbert humperdinck feeling flash flash-часики gif love playcast sinedots ii smiley sothink swf quicker windows system а.дорошев английский анимация анимация плагином анимация-движение бабочки баклажаны блинчики видео волосы выпечка вязание генераторы грибы десерт детки в png духи животные запеканка здоровье интересно калькулятор клипарты кляр компьютер котик котлеты кошки кулинария листья маслята молитва народные средства новогодний клипарт новый год открытки отмыть кеды пар над чашкой печень пинетки пирог плагин плагин для фш плейкаст плэйкасты поздравления полезные советы пособие программа sothink swf quicker птички в png радио рамочка рамочки рождество рукоделие рыба салат салаты селедка смайлики снег советы ссылки стихи тапочки-носки текст урок уроки фильм флеш флеш-анимация флеш-открытка флеш-плеер флеш-плееры флеш-программа флеш-уроки флеш-часики флеш-часы флеш-эффекты фоны фотошоп футажи фш-световые эффекты цветы часики шрифты экшен

 -Рубрики

 -Цитатник

РЕЦЕПТ БЫСТРОГО И ВКУСНОГО ЯБЛОЧНОГО ПИРОГА - (0)

Рецепт быстрого и вкусного яблочного пирога С наступлением осени яблочная выпечка становится ...

Как приготовить соус сацебели - (0)

Как приготовить соус сацебели   Сацебели – традиционный соус, ко...

Народные рецепты для лечения печени и желчевыводящих путей - исцеляемся без таблеток! - (0)

Народные рецепты для лечения печени и желчевыводящих путей - исцеляемся без таблеток!   ...

Урок анимации - (0)

Урок анимации - Летящая лента Этим эффектом хорошо создавать анимацию линий, они будут у вас лете...

Плеер - урок по созданию флеш-плеер - (0)

Урок по созданию пасхальной флешки Близится христианский праздник Пасха. Назрела потребность, ...

 -Всегда под рукой

 -Поиск по дневнику

Поиск сообщений в ninel455

 -Подписка по e-mail

 

 -Статистика

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


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

Четверг, 17 Декабря 2015 г. 22:46 + в цитатник
Цитата сообщения Nelya_Gerbekova Как создать кликабельную картинку или кнопку-переход в редакторе

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

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 причин по которым не стоит вставлять в комментарии картинки
...
Часть 23 - Добавление к предыдущему посту .Как изменить размер плеера
Часть 24 - Как сжать размер картинки (фона) до требуемой величины для загрузки в дневник.
Часть 25 - Как создать кликабельную картинку или кнопку-переход в редакторе
Часть 26 - Почему пропадают картинки и фотки?
Часть 27 - Украшаем дневник! Как применить и управлять схемами
...
Часть 33 - Все коды для оформления дневника в одном месте
Часть 34 - Еще один способ создания и вставки музыкального плеера в сообщение дневника.
Часть 35 - Все варианты создания и вставки плеера в текст сообщения или в рамку с кодом

Серия сообщений "Для новичков ЛИ.РУ.":
Часть 1 - Для самых начинающих лирушников.
Часть 2 - С чего начинать дневник?
...
Часть 25 - Что может раздражать ваших читателей в вашем дневнике. Для новичков и не очень.
Часть 26 - Урок для самых новеньких! Как загрузить картинку для фона дневника
Часть 27 - Как создать кликабельную картинку или кнопку-переход в редакторе
Часть 28 - Урок по использованию рамочек от Летиция
Часть 29 - Как добавить рубрику прямо из редактора при цитировании поста
...
Часть 35 - Читаем дневники не прерывая музыку!
Часть 36 - Наводим порядок в дневнике!Как разложить все сообщения в дневнике по полочкам и другие самые важные рекомендации для новичков!
Часть 37 - Уроки для новичков Лиру.
Рубрики:  Уроки HTML
Полезные советы, пособие
Метки:  

 

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

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

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

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